100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
import { Container, DataGridInner } from '@/components';
|
|
import { TransactionTopupProvider } from './hooks/TransactionTopupContext';
|
|
import { Breadcrumbs, Link } from '@mui/material';
|
|
import { Helmet } from 'react-helmet';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useState } from 'react';
|
|
import { useCallApi } from '@/hooks';
|
|
import { apiConfig } from '@/config/api.config';
|
|
import { toast } from 'sonner';
|
|
|
|
const TransactionTopup = () => {
|
|
const [form, setForm] = useState({
|
|
topupAmount: '',
|
|
pin: ''
|
|
});
|
|
const { GetData, PostData } = useCallApi();
|
|
const API_URL = apiConfig.transaction;
|
|
|
|
const handleSubmit = async (e: any) => {
|
|
e.preventDefault();
|
|
console.log('Submitted Data:', form);
|
|
|
|
if (form.pin == '' || form.topupAmount) {
|
|
toast.warning('Please fill in all required fields.')
|
|
return
|
|
}
|
|
try {
|
|
let requestTopup = await PostData(`${API_URL}/transaction/request-topup`, {
|
|
amount: form.topupAmount,
|
|
pin: form.pin
|
|
})
|
|
if (requestTopup?.status == true) {
|
|
toast.success('Success Request Topup')
|
|
} else {
|
|
toast.warning(`${requestTopup?.message}`)
|
|
}
|
|
} catch (error) {
|
|
toast.warning('Failed')
|
|
}
|
|
// TODO: Kirim ke backend atau proses lainnya
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Helmet>
|
|
<title>TPAY | Transaction Topup Request</title>
|
|
</Helmet>
|
|
<TransactionTopupProvider>
|
|
<Container className="mb-7">
|
|
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION TOPUP REQUEST</h1>
|
|
<Breadcrumbs sx={{ mb: 2 }}>
|
|
<Link underline="none" color="inherit" href="/">
|
|
<span className="text-sm hover:underline">Dashboard</span>
|
|
</Link>
|
|
<Link underline="none" color="inherit">
|
|
<span className="text-sm">Transaction</span>
|
|
</Link>
|
|
<Link underline="none" color="inherit">
|
|
<span className="text-sm">Topup</span>
|
|
</Link>
|
|
</Breadcrumbs>
|
|
<Container className="flex items-center justify-center">
|
|
<div className="card max-w-[750px] w-full">
|
|
<div className="card-body p-10">
|
|
{/* form */}
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label htmlFor="topupAmount">Topup Amount</label><span className="text-red-500">*</span>
|
|
<Input
|
|
id="topupAmount"
|
|
type="number"
|
|
value={form.topupAmount}
|
|
onChange={(e) => setForm({ ...form, topupAmount: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="pin">PIN</label><span className="text-red-500">*</span>
|
|
<Input
|
|
id="pin"
|
|
type="password"
|
|
value={form.pin}
|
|
onChange={(e) => setForm({ ...form, pin: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Button type="submit">Submit</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Container>
|
|
</TransactionTopupProvider>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TransactionTopup;
|