hamid zarghami
130 lines
5.4 KiB
TypeScript
130 lines
5.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 '../../../components/Toast'
|
|
import { ErrorType } from '../../../helpers/types'
|
|
import { TickCircle } from 'iconsax-react'
|
|
|
|
const CardtoCard: FC = () => {
|
|
|
|
const { t } = useTranslation('global')
|
|
const [file, setFile] = useState<File>()
|
|
const [percent, setPercent] = useState<number>(0)
|
|
const getBankAccount = useGetBankAccount()
|
|
const depositTransfer = useDepositTransfer()
|
|
const upload = useSingleUpload(setPercent)
|
|
|
|
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(t('wallet.successful_transfer'), 'success')
|
|
window.location.reload()
|
|
},
|
|
onError: (error: ErrorType) => {
|
|
toast(error.response?.data?.error?.message[0], 'error')
|
|
}
|
|
})
|
|
},
|
|
onError: (error: ErrorType) => {
|
|
toast(error.response?.data?.error?.message[0], 'error')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
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: 'IR' + 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_sheba')}
|
|
name='amount'
|
|
onChange={(e) => formik.setFieldValue('amount', e.target.value)}
|
|
error_text={formik.touched.amount && formik.errors.amount ? formik.errors.amount : ''}
|
|
seprator
|
|
/>
|
|
</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
|
|
className='xl:w-[180px]'
|
|
onClick={() => formik.handleSubmit()}
|
|
isLoading={depositTransfer.isPending || upload.isPending}
|
|
percentage={percent}
|
|
>
|
|
<div className='flex gap-2 items-center'>
|
|
<TickCircle
|
|
size={24}
|
|
color='white'
|
|
/>
|
|
<div>{t('wallet.submit_slip')}</div>
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
|
|
</Fragment>
|
|
}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CardtoCard |