danak/danak-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

online payment

Browse Source
This commit is contained in:
hamid zarghami
2025-02-05 11:10:17 +03:30
parent f4263283dc
commit 31daaf6172
8 changed files with 120 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+2 -2
View File
@@ -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.207:3500'
# VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com'
VITE_BASE_URL = 'http://192.168.0.221:4000'
src/assets/images/zarinpal-logo-min.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

src/langs/fa.json
+5 -1
View File
@@ -274,7 +274,11 @@
"submit_slip": "ثبت فیش",
"sheba": "شبا",
"pay_sheba": "پرداخت شبا",
"enter_sheba_deposit": "مبلغ شبا شده شده را وارد کنید"
"enter_sheba_deposit": "مبلغ شبا شده شده را وارد کنید",
"all_cards": "تمام کارت های عضو شتاب",
"error_select_price": "لطفا مبلغ مورد نظر خود را انتخاب کنید",
"error_min_price": "حداقل مبلغ ۱۰۰ هزار تومان می باشد",
"transfer_to_getway": "در حال انتقال به درگاه پرداخت"
},
"notif": {
"natification": "اعلان ها"
src/pages/wallet/components/Online.tsx
+63 -49
View File
@@ -2,14 +2,51 @@ import { FC, useState } from 'react'
import Button from '../../../components/Button'
import { useTranslation } from 'react-i18next'
import { clx } from '../../../helpers/utils'
import SamanImage from '../../../assets/images/saman.png'
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'
const defaultAmounts = [100000, 200000, 500000, 1000000, 2000000, 5000000, 10000000]
const getWays = [
{
name: 'zarinpal',
logo: ZarinPalLogo,
title: 'زرین پال'
}
]
const Online: FC = () => {
const { t } = useTranslation('global')
const [priceSelect, setPriceSelect] = useState<number>(1)
const [bankSelected, setBankSelected] = useState<number>(1)
const getGetWays = useGetGetWays()
const payment = usePayment()
const [bankSelected, setBankSelected] = useState<string>(getWays[0].name)
const [desiredAmount, setDesiredAmount] = useState<number>(0)
const [amountSelected, setAmountSelected] = useState<number>(0)
const handlePay = () => {
if (desiredAmount === 0 && amountSelected === 0) {
toast.error(t('wallet.error_select_price'))
} else {
const amout = desiredAmount === 0 ? amountSelected : desiredAmount
if (amout < 100000) {
toast.error(t('wallet.error_min_price'))
return
} else {
payment.mutate({ amount: amout, gateway: bankSelected }, {
onSuccess: (data) => {
toast.success(t('wallet.transfer_to_getway'))
window.location.href = data?.data?.redirectUrl
},
onError: (error: ErrorType) => {
toast.error(error?.response?.data?.error?.message[0])
}
})
}
}
}
return (
<div className='mt-8 bg-white p-8 rounded-3xl'>
@@ -22,42 +59,24 @@ const Online: FC = () => {
</div>
<div className='mt-4 flex gap-4 flex-wrap'>
<div onClick={() => setPriceSelect(1)} className={clx(
{
defaultAmounts.map((amount) => (
<div onClick={() => setAmountSelected(amount)} key={amount} className={clx(
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
priceSelect === 1 && 'border-black'
amountSelected === amount && 'border-black'
)}>
۱۰,۰۰۰,۰۰۰ تومان
</div>
<div onClick={() => setPriceSelect(2)} className={clx(
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
priceSelect === 2 && 'border-black'
)}>
۱۰,۰۰۰,۰۰۰ تومان
</div>
<div onClick={() => setPriceSelect(3)} className={clx(
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
priceSelect === 3 && 'border-black'
)}>
۱۰,۰۰۰,۰۰۰ تومان
</div>
<div onClick={() => setPriceSelect(4)} className={clx(
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
priceSelect === 4 && 'border-black'
)}>
۱۰,۰۰۰,۰۰۰ تومان
</div>
<div onClick={() => setPriceSelect(5)} className={clx(
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
priceSelect === 5 && 'border-black'
)}>
۱۰,۰۰۰,۰۰۰ تومان
{amount.toLocaleString()} تومان
</div>
))
}
</div>
<div className='mt-9'>
<Input
label={t('wallet.optional_price')}
placeholder={t('wallet.enter_your_price')}
onChange={(e) => setDesiredAmount(Number(e.target.value))}
/>
</div>
@@ -67,40 +86,35 @@ const Online: FC = () => {
</div>
<div className='mt-6 flex gap-4'>
<div onClick={() => setBankSelected(1)} className={clx(
{
getGetWays.data?.data?.gateways?.map((item: { name: string }) => {
const way = getWays.find((way) => way.name === item.name)
return (
<div key={item.name} onClick={() => setBankSelected(way?.name ? way?.name : '')} 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 === 1 && 'border-black'
bankSelected === way?.name && 'border-black'
)}>
<img src={SamanImage} className='w-10' />
<img src={way?.logo} className='w-10' />
<div>
<div>
بانک پارسیان
{way?.title}
</div>
<div className='text-xs mt-1 text-description'>
تمام کارت های عضو شتاب
</div>
</div>
</div>
<div onClick={() => setBankSelected(2)} 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 === 2 && 'border-black'
)}>
<img src={SamanImage} className='w-10' />
<div>
<div>
بانک پارسیان
</div>
<div className='text-xs mt-1 text-description'>
تمام کارت های عضو شتاب
{t('wallet.all_cards')}
</div>
</div>
</div>
)
})
}
</div>
<div className='mt-10 flex justify-end'>
<Button
label={t('wallet.pay')}
className='w-[180px]'
onClick={handlePay}
isLoading={payment.isPending}
/>
</div>
</div>
src/pages/wallet/hooks/useWalletData.ts
+16
View File
@@ -0,0 +1,16 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import * as api from "../service/WalletService";
import { PaymentType } from "../types/WalletTypes";
export const useGetGetWays = () => {
return useQuery({
queryKey: ["getGetWays"],
queryFn: api.getGetWays,
});
};
export const usePayment = () => {
return useMutation({
mutationFn: (variables: PaymentType) => api.payment(variables),
});
};
src/pages/wallet/service/WalletService.ts
+12
View File
@@ -0,0 +1,12 @@
import axios from "../../../config/axios";
import { PaymentType } from "../types/WalletTypes";
export const getGetWays = async () => {
const { data } = await axios.get(`/payments/gateways`);
return data;
};
export const payment = async (params: PaymentType) => {
const { data } = await axios.post(`/payments/deposit/gateway`, params);
return data;
};
src/pages/wallet/types/WalletTypes.ts
+4
View File
@@ -0,0 +1,4 @@
export type PaymentType = {
amount: number;
gateway: string;
};
src/router/Main.tsx
+6 -3
View File
@@ -5,9 +5,9 @@ import { Route, Routes } from 'react-router-dom'
import { Pages } from '../config/Pages'
import Home from '../pages/home/Home'
import MyServices from '../pages/service/MyServices'
import TicketList from '../pages/ticket/TicketList'
import CreateTicket from '../pages/ticket/CreateTicket'
import TicketDetail from '../pages/ticket/Detail'
// import TicketList from '../pages/ticket/TicketList'
// import CreateTicket from '../pages/ticket/CreateTicket'
// import TicketDetail from '../pages/ticket/Detail'
import TransactionList from '../pages/transaction/List'
import ReceiptsList from '../pages/receipts/List'
import AnnouncementtList from '../pages/annoncement/List'
@@ -21,6 +21,9 @@ import OtherServices from '../pages/service/OtherServices'
import Footer from '../shared/Footer'
import AnnouncementDetail from '../pages/annoncement/Detail'
import DetailService from '../pages/service/DetailService'
import TicketList from '../pages/ticket/TicketList'
import CreateTicket from '../pages/ticket/CreateTicket'
import TicketDetail from '../pages/ticket/Detail'
const MainRouter: FC = () => {
return (