From 2c92a73e744ffdb0cf30feb5d6c7b1855591edae Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Thu, 6 Feb 2025 18:35:15 +0330 Subject: [PATCH] card to card --- .env | 4 +- src/langs/fa.json | 3 +- src/pages/wallet/components/CardtoCard.tsx | 105 ++++++++++++++++----- src/pages/wallet/components/Online.tsx | 24 ++--- src/pages/wallet/hooks/useWalletData.ts | 16 +++- src/pages/wallet/service/WalletService.ts | 12 ++- src/pages/wallet/types/WalletTypes.ts | 21 ++++- 7 files changed, 142 insertions(+), 43 deletions(-) diff --git a/.env b/.env index ed70d10..d62a7ef 100644 --- a/.env +++ b/.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' \ No newline at end of file +# VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com' +VITE_BASE_URL = 'http://192.168.0.221:4000' \ No newline at end of file diff --git a/src/langs/fa.json b/src/langs/fa.json index 2b7959a..ec6761f 100644 --- a/src/langs/fa.json +++ b/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": "اعلان ها" diff --git a/src/pages/wallet/components/CardtoCard.tsx b/src/pages/wallet/components/CardtoCard.tsx index 5f7890a..c76d6d5 100644 --- a/src/pages/wallet/components/CardtoCard.tsx +++ b/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() + + const formik = useFormik({ + 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 (
-
- {t('wallet.card_to_card')} -
+ { + getBankAccount.isPending ? + + : + +
+ {t('wallet.card_to_card')} +
-
- -
+
+ +
-
-
+
+ setFile(file[0])} + /> +
+ +
+
+ + + }
) diff --git a/src/pages/wallet/components/Online.tsx b/src/pages/wallet/components/Online.tsx index fc930ec..797bdb0 100644 --- a/src/pages/wallet/components/Online.tsx +++ b/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(getWays[0].name) + const [bankSelected, setBankSelected] = useState('') const [desiredAmount, setDesiredAmount] = useState(0) const [amountSelected, setAmountSelected] = useState(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 = () => {
{ - 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 ( -
setBankSelected(way?.name ? way?.name : '')} className={clx( +
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' )}> - +
- {way?.title} + {item.nameFa}
{t('wallet.all_cards')} diff --git a/src/pages/wallet/hooks/useWalletData.ts b/src/pages/wallet/hooks/useWalletData.ts index e39c69d..8faf5a9 100644 --- a/src/pages/wallet/hooks/useWalletData.ts +++ b/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), + }); +}; diff --git a/src/pages/wallet/service/WalletService.ts b/src/pages/wallet/service/WalletService.ts index aaf4f53..7123f2b 100644 --- a/src/pages/wallet/service/WalletService.ts +++ b/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; +}; diff --git a/src/pages/wallet/types/WalletTypes.ts b/src/pages/wallet/types/WalletTypes.ts index 76599bd..f2a3935 100644 --- a/src/pages/wallet/types/WalletTypes.ts +++ b/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; };