online payment

.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 = 'https://danak-dsc-api.run.danakcorp.com'
-# VITE_BASE_URL = 'http://192.168.0.207:3500'
+VITE_BASE_URL = 'http://192.168.0.221:4000'

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": "اعلان ها"

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<number>(1)
+    const getGetWays = useGetGetWays()
-    const [bankSelected, setBankSelected] = useState<number>(1)
+    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(
+                {
-                    'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
+                    defaultAmounts.map((amount) => (
-                    priceSelect === 1 && 'border-black'
+                        <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',
-                    ۱۰,۰۰۰,۰۰۰ تومان
+                            amountSelected === amount && 'border-black'
-                </div>
+                        )}>
-                <div onClick={() => setPriceSelect(2)} className={clx(
+                            {amount.toLocaleString()} تومان
-                    'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
+                        </div>
-                    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'
-                )}>
-                    ۱۰,۰۰۰,۰۰۰ تومان
-                </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(
+                    {
-                        '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]',
+                        getGetWays.data?.data?.gateways?.map((item: { name: string }) => {
-                        bankSelected === 1 && 'border-black'
+                            const way = getWays.find((way) => way.name === item.name)
-                    )}>
+                            return (
-                        <img src={SamanImage} className='w-10' />
+                                <div key={item.name} onClick={() => setBankSelected(way?.name ? way?.name : '')} className={clx(
-                        <div>
+                                    '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]',
-                            <div>
+                                    bankSelected === way?.name && 'border-black'
-                                بانک پارسیان
+                                )}>
-                            </div>
+                                    <img src={way?.logo} className='w-10' />
-                            <div className='text-xs mt-1 text-description'>
+                                    <div>
-                                تمام کارت های عضو شتاب
+                                        <div>
-                            </div>
+                                            {way?.title}
-                        </div>
+                                        </div>
-                    </div>
+                                        <div className='text-xs mt-1 text-description'>
-                    <div onClick={() => setBankSelected(2)} className={clx(
+                                            {t('wallet.all_cards')}
-                        '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]',
+                                        </div>
-                        bankSelected === 2 && 'border-black'
+                                    </div>
-                    )}>
+                                </div>
-                        <img src={SamanImage} className='w-10' />
+                            )
-                        <div>
+                        })
-                            <div>
+                    }
-                                بانک پارسیان
-                            </div>
-                            <div className='text-xs mt-1 text-description'>
-                                تمام کارت های عضو شتاب
-                            </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

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

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

@@ -0,0 +1,4 @@
+export type PaymentType = {
+  amount: number;
+  gateway: string;
+};

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 TicketList from '../pages/ticket/TicketList'
-import CreateTicket from '../pages/ticket/CreateTicket'
+// import CreateTicket from '../pages/ticket/CreateTicket'
-import TicketDetail from '../pages/ticket/Detail'
+// 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 (