card to card

src/pages/wallet/components/CardtoCard.tsx

@@ -1,38 +1,101 @@
-import { FC } from 'react'
+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'
 
 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: 'CARD_TO_CARD'
+        },
+        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, transferReceiptUrl: data.data.url })
+                    }
+                })
+            }
+        }
+    })
 
     return (
         <div className='mt-8 bg-white p-8 rounded-3xl'>
-            <div>
-                {t('wallet.card_to_card')}
-            </div>
+            {
+                getBankAccount.isPending ?
+                    <PageLoading />
+                    :
+                    <Fragment>
+                        <div>
+                            {t('wallet.card_to_card')}
+                        </div>
 
-            <div className='mt-8'>
-                <Input
-                    label={t('wallet.amount')}
-                    placeholder={t('wallet.enter_amount_card')}
-                />
-            </div>
+                        <div className='mt-8'>
+                            <Select
+                                label={t('wallet.select_bank_account')}
+                                placeholder={t('select')}
+                                items={getBankAccount.data?.data?.bankAccounts?.map((item: any) => ({
+                                    label: item.cardNumber,
+                                    value: item.id
+                                }))}
+                                name='bankAccountId'
+                                onChange={formik.handleChange}
+                                error_text={formik.touched.bankAccountId && formik.errors.bankAccountId ? formik.errors.bankAccountId : ''}
+                            />
+                        </div>
 
-            <div className='mt-8'>
-                <UploadBox
-                    label={t('wallet.upload_deposit_slip')}
-                />
-            </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-10 flex justify-end'>
-                <Button
-                    label={t('wallet.submit_slip')}
-                    className='w-[180px]'
-                />
-            </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>
     )