hamid zarghami
112 lines
4.4 KiB
TypeScript
112 lines
4.4 KiB
TypeScript
import { FC, Fragment, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Input from '../../../components/Input'
|
|
import UploadBox from '../../../components/UploadBox'
|
|
import Button from '../../../components/Button'
|
|
import { useDepositTransfer, useGetBankAccount } from '../hooks/useWalletData'
|
|
import Select from '../../../components/Select'
|
|
import PageLoading from '../../../components/PageLoading'
|
|
import { useFormik } from 'formik'
|
|
import { DepositTransferType } from '../types/WalletTypes'
|
|
import * as Yup from 'yup'
|
|
import { useSingleUpload } from '../../ticket/hooks/useTicketData'
|
|
import { toast } from 'react-toastify'
|
|
|
|
const CardtoCard: FC = () => {
|
|
|
|
const { t } = useTranslation('global')
|
|
const getBankAccount = useGetBankAccount()
|
|
const depositTransfer = useDepositTransfer()
|
|
const upload = useSingleUpload()
|
|
const [file, setFile] = useState<File>()
|
|
|
|
const formik = useFormik<DepositTransferType>({
|
|
initialValues: {
|
|
amount: 0,
|
|
transferReceiptUrl: '',
|
|
bankAccountId: '',
|
|
method: 'SHEBA'
|
|
},
|
|
validationSchema: Yup.object({
|
|
amount: Yup.number().required(t('errors.required')),
|
|
bankAccountId: Yup.string().required(t('errors.required')),
|
|
}),
|
|
onSubmit: (values) => {
|
|
if (file) {
|
|
const formData = new FormData()
|
|
formData.append('file', file)
|
|
upload.mutate(formData, {
|
|
onSuccess: (data) => {
|
|
depositTransfer.mutate({ ...values, amount: +values.amount, transferReceiptUrl: data.data.url }, {
|
|
onSuccess: () => {
|
|
formik.resetForm()
|
|
setFile(undefined)
|
|
toast.success(t('wallet.successful_transfer'))
|
|
window.location.reload()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div className='mt-8 bg-white p-8 rounded-3xl'>
|
|
{
|
|
getBankAccount.isPending ?
|
|
<PageLoading />
|
|
:
|
|
<Fragment>
|
|
<div>
|
|
{t('wallet.pay_sheba')}
|
|
</div>
|
|
|
|
<div className='mt-8'>
|
|
<Select
|
|
label={t('wallet.select_sheba')}
|
|
placeholder={t('select')}
|
|
items={getBankAccount.data?.data?.bankAccounts?.map((item: any) => ({
|
|
label: item.IBan,
|
|
value: item.id
|
|
}))}
|
|
name='bankAccountId'
|
|
onChange={formik.handleChange}
|
|
error_text={formik.touched.bankAccountId && formik.errors.bankAccountId ? formik.errors.bankAccountId : ''}
|
|
/>
|
|
</div>
|
|
|
|
<div className='mt-8'>
|
|
<Input
|
|
label={t('wallet.amount')}
|
|
placeholder={t('wallet.enter_amount_card')}
|
|
name='amount'
|
|
onChange={formik.handleChange}
|
|
error_text={formik.touched.amount && formik.errors.amount ? formik.errors.amount : ''}
|
|
/>
|
|
</div>
|
|
|
|
<div className='mt-8'>
|
|
<UploadBox
|
|
label={t('wallet.upload_deposit_slip')}
|
|
onChange={(file) => setFile(file[0])}
|
|
/>
|
|
</div>
|
|
|
|
<div className='mt-10 flex justify-end'>
|
|
<Button
|
|
label={t('wallet.submit_slip')}
|
|
className='w-[180px]'
|
|
onClick={() => formik.handleSubmit()}
|
|
isLoading={depositTransfer.isPending || upload.isPending}
|
|
/>
|
|
</div>
|
|
|
|
</Fragment>
|
|
}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CardtoCard |