diff --git a/.env b/.env index cb6837e..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.207:3500' \ 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/assets/images/zarinpal-logo-min.png b/src/assets/images/zarinpal-logo-min.png new file mode 100644 index 0000000..7970712 Binary files /dev/null and b/src/assets/images/zarinpal-logo-min.png differ diff --git a/src/langs/fa.json b/src/langs/fa.json index 5c2825f..4e7abd4 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -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": "اعلان ها" diff --git a/src/pages/wallet/components/Online.tsx b/src/pages/wallet/components/Online.tsx index b2bde07..fc930ec 100644 --- a/src/pages/wallet/components/Online.tsx +++ b/src/pages/wallet/components/Online.tsx @@ -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(1) - const [bankSelected, setBankSelected] = useState(1) + const getGetWays = useGetGetWays() + const payment = usePayment() + const [bankSelected, setBankSelected] = useState(getWays[0].name) + const [desiredAmount, setDesiredAmount] = useState(0) + const [amountSelected, setAmountSelected] = useState(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 (
@@ -22,42 +59,24 @@ const Online: FC = () => {
-
setPriceSelect(1)} className={clx( - 'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg', - priceSelect === 1 && 'border-black' - )}> - ۱۰,۰۰۰,۰۰۰ تومان -
-
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' - )}> - ۱۰,۰۰۰,۰۰۰ تومان -
-
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' - )}> - ۱۰,۰۰۰,۰۰۰ تومان -
-
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' - )}> - ۱۰,۰۰۰,۰۰۰ تومان -
-
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' - )}> - ۱۰,۰۰۰,۰۰۰ تومان -
+ { + defaultAmounts.map((amount) => ( +
setAmountSelected(amount)} key={amount} className={clx( + 'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg', + amountSelected === amount && 'border-black' + )}> + {amount.toLocaleString()} تومان +
+ )) + } +
setDesiredAmount(Number(e.target.value))} />
@@ -67,40 +86,35 @@ const Online: FC = () => {
-
setBankSelected(1)} 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' - )}> - -
-
- بانک پارسیان -
-
- تمام کارت های عضو شتاب -
-
-
-
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' - )}> - -
-
- بانک پارسیان -
-
- تمام کارت های عضو شتاب -
-
-
+ { + getGetWays.data?.data?.gateways?.map((item: { name: string }) => { + const way = getWays.find((way) => way.name === item.name) + return ( +
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 === way?.name && 'border-black' + )}> + +
+
+ {way?.title} +
+
+ {t('wallet.all_cards')} +
+
+
+ ) + }) + }
diff --git a/src/pages/wallet/hooks/useWalletData.ts b/src/pages/wallet/hooks/useWalletData.ts new file mode 100644 index 0000000..e39c69d --- /dev/null +++ b/src/pages/wallet/hooks/useWalletData.ts @@ -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), + }); +}; diff --git a/src/pages/wallet/service/WalletService.ts b/src/pages/wallet/service/WalletService.ts new file mode 100644 index 0000000..aaf4f53 --- /dev/null +++ b/src/pages/wallet/service/WalletService.ts @@ -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; +}; diff --git a/src/pages/wallet/types/WalletTypes.ts b/src/pages/wallet/types/WalletTypes.ts new file mode 100644 index 0000000..76599bd --- /dev/null +++ b/src/pages/wallet/types/WalletTypes.ts @@ -0,0 +1,4 @@ +export type PaymentType = { + amount: number; + gateway: string; +}; diff --git a/src/router/Main.tsx b/src/router/Main.tsx index 2685135..38096ec 100644 --- a/src/router/Main.tsx +++ b/src/router/Main.tsx @@ -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 (