card to card

.env

@@ -1,4 +1,4 @@
 VITE_TOKEN_NAME = 'dsc_token'
 VITE_REFRESH_TOKEN_NAME = 'dsc_refresh_token'
-VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com'
-# VITE_BASE_URL = 'http://192.168.0.221:4000'
+# VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com'
+VITE_BASE_URL = 'http://192.168.0.221:4000'

src/langs/fa.json

@@ -281,7 +281,8 @@
     "all_cards": "تمام کارت های عضو شتاب",
     "error_select_price": "لطفا مبلغ مورد نظر خود را انتخاب کنید",
     "error_min_price": "حداقل مبلغ ۱۰۰ هزار تومان می باشد",
-    "transfer_to_getway": "در حال انتقال به درگاه پرداخت"
+    "transfer_to_getway": "در حال انتقال به درگاه پرداخت",
+    "select_bank_account": "انتخاب کارت"
   },
   "notif": {
     "natification": "اعلان ها"

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>
     )

src/pages/wallet/components/Online.tsx

@@ -4,25 +4,18 @@ import { useTranslation } from 'react-i18next'
 import { clx } from '../../../helpers/utils'
 import Input from '../../../components/Input'
 import { useGetGetWays, usePayment } from '../hooks/useWalletData'
-import ZarinPalLogo from '../../../assets/images/zarinpal-logo-min.png'
 import { toast } from 'react-toastify'
 import { ErrorType } from '../../../helpers/types'
+import { GatewayItemType } from '../types/WalletTypes'
 
 const defaultAmounts = [100000, 200000, 500000, 1000000, 2000000, 5000000, 10000000]
-const getWays = [
-    {
-        name: 'zarinpal',
-        logo: ZarinPalLogo,
-        title: 'زرین پال'
-    }
-]
 
 const Online: FC = () => {
 
     const { t } = useTranslation('global')
     const getGetWays = useGetGetWays()
     const payment = usePayment()
-    const [bankSelected, setBankSelected] = useState<string>(getWays[0].name)
+    const [bankSelected, setBankSelected] = useState<string>('')
     const [desiredAmount, setDesiredAmount] = useState<number>(0)
     const [amountSelected, setAmountSelected] = useState<number>(0)
 
@@ -35,7 +28,7 @@ const Online: FC = () => {
                 toast.error(t('wallet.error_min_price'))
                 return
             } else {
-                payment.mutate({ amount: amout, gateway: bankSelected }, {
+                payment.mutate({ amount: amout, gatewayId: bankSelected }, {
                     onSuccess: (data) => {
                         toast.success(t('wallet.transfer_to_getway'))
                         window.location.href = data?.data?.redirectUrl
@@ -87,17 +80,16 @@ const Online: FC = () => {
 
                 <div className='mt-6 flex gap-4'>
                     {
-                        getGetWays.data?.data?.gateways?.map((item: { name: string }) => {
-                            const way = getWays.find((way) => way.name === item.name)
+                        getGetWays.data?.data?.paymentGateways?.map((item: GatewayItemType) => {
                             return (
-                                <div key={item.name} onClick={() => setBankSelected(way?.name ? way?.name : '')} className={clx(
+                                <div key={item.name} onClick={() => setBankSelected(item.id)} className={clx(
                                     'xl:h-16 rounded-xl cursor-pointer flex xl:flex-row flex-col gap-4 items-center text-center py-3 xl:py-0 xl:text-right px-4 border border-border xl:w-[240px]',
-                                    bankSelected === way?.name && 'border-black'
+                                    bankSelected === item?.id && 'border-black'
                                 )}>
-                                    <img src={way?.logo} className='w-10' />
+                                    <img src={item.logoUrl} className='w-10' />
                                     <div>
                                         <div>
-                                            {way?.title}
+                                            {item.nameFa}
                                         </div>
                                         <div className='text-xs mt-1 text-description'>
                                             {t('wallet.all_cards')}

src/pages/wallet/hooks/useWalletData.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/WalletService";
-import { PaymentType } from "../types/WalletTypes";
+import { DepositTransferType, PaymentType } from "../types/WalletTypes";
 
 export const useGetGetWays = () => {
   return useQuery({
@@ -14,3 +14,17 @@ export const usePayment = () => {
     mutationFn: (variables: PaymentType) => api.payment(variables),
   });
 };
+
+export const useGetBankAccount = () => {
+  return useQuery({
+    queryKey: ["bankAccount"],
+    queryFn: api.getBankAccount,
+  });
+};
+
+export const useDepositTransfer = () => {
+  return useMutation({
+    mutationFn: (variables: DepositTransferType) =>
+      api.depositTransfer(variables),
+  });
+};

src/pages/wallet/service/WalletService.ts

@@ -1,5 +1,5 @@
 import axios from "../../../config/axios";
-import { PaymentType } from "../types/WalletTypes";
+import { DepositTransferType, PaymentType } from "../types/WalletTypes";
 
 export const getGetWays = async () => {
   const { data } = await axios.get(`/payments/gateways`);
@@ -10,3 +10,13 @@ export const payment = async (params: PaymentType) => {
   const { data } = await axios.post(`/payments/deposit/gateway`, params);
   return data;
 };
+
+export const getBankAccount = async () => {
+  const { data } = await axios.get(`/payments/bank-account`);
+  return data;
+};
+
+export const depositTransfer = async (params: DepositTransferType) => {
+  const { data } = await axios.post(`/payments/deposit/transfer`, params);
+  return data;
+};

src/pages/wallet/types/WalletTypes.ts

@@ -1,4 +1,23 @@
 export type PaymentType = {
   amount: number;
-  gateway: string;
+  gatewayId: string;
+};
+
+export type GatewayItemType = {
+  id: string;
+  name: string;
+  description: string;
+  logoUrl: string;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+  nameFa: string;
+};
+
+export type MethosTransferType = "CARD_TO_CARD" | "SHEBA";
+export type DepositTransferType = {
+  amount: number;
+  transferReceiptUrl: string;
+  bankAccountId: string;
+  method: MethosTransferType;
 };