From de7bed95cd49fd6321a1d32e713041b9b6814367 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 22 Feb 2025 17:07:32 +0330
Subject: [PATCH] receipt + learning + wallet + ...

---
 src/config/func.ts                            |   2 +-
 src/langs/fa.json                             |   3 +-
 src/pages/learning/List.tsx                   | 103 +++++++-----------
 src/pages/learning/hooks/useLearningData.ts   |   9 ++
 src/pages/learning/service/LearningService.ts |   6 +
 src/pages/learning/types/LearningTypes.ts     |  16 +++
 .../receipts/components/RegisterInfo.tsx      |   4 +-
 src/pages/receipts/hooks/useReceiptData.ts    |   6 +
 src/pages/receipts/service/ReceiptService.ts  |   5 +
 src/pages/receipts/types/ReceiptTypes.ts      |  11 ++
 src/pages/wallet/Wallet.tsx                   |  12 ++
 src/pages/wallet/hooks/useWalletData.ts       |   7 ++
 src/pages/wallet/service/WalletService.ts     |   5 +
 13 files changed, 121 insertions(+), 68 deletions(-)
 create mode 100644 src/pages/learning/hooks/useLearningData.ts
 create mode 100644 src/pages/learning/service/LearningService.ts
 create mode 100644 src/pages/learning/types/LearningTypes.ts

diff --git a/src/config/func.ts b/src/config/func.ts
index 771066a..ffaca05 100644
--- a/src/config/func.ts
+++ b/src/config/func.ts
@@ -4,7 +4,7 @@ export function isEmail(input: string): boolean {
 }
 
 export function NumberFormat(number: number): string {
-  return Intl.NumberFormat().format(number);
+  return Intl.NumberFormat("fa-IR").format(number);
   // return Intl.NumberFormat("fa-IR").format(number);
 }
 
diff --git a/src/langs/fa.json b/src/langs/fa.json
index c40e4a0..85a12d7 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -331,7 +331,8 @@
     "error_min_price": "حداقل مبلغ ۱۰۰ هزار تومان می باشد",
     "transfer_to_getway": "در حال انتقال به درگاه پرداخت",
     "select_bank_account": "انتخاب کارت",
-    "successful_transfer": "درخواست انتقال وجه با موفقیت انجام شد"
+    "successful_transfer": "درخواست انتقال وجه با موفقیت انجام شد",
+    "balance": "اعتبار فعلی شما "
   },
   "notif": {
     "natification": "اعلان ها"
diff --git a/src/pages/learning/List.tsx b/src/pages/learning/List.tsx
index 3f3dcc7..eb11366 100644
--- a/src/pages/learning/List.tsx
+++ b/src/pages/learning/List.tsx
@@ -1,13 +1,17 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import BannerImage from '../../assets/images/banner.png'
-import Select from '../../components/Select'
 import Input from '../../components/Input'
-import LearningImage from '../../assets/images/learning.png'
+import { useGetLearnings } from './hooks/useLearningData'
+import PageLoading from '../../components/PageLoading'
+import { LearningItemType } from './types/LearningTypes'
+import moment from 'moment-jalaali'
 
 const LearningList: FC = () => {
 
     const { t } = useTranslation('global')
+    const [search, setSearch] = useState<string>('')
+    const getLearnings = useGetLearnings(search)
 
     return (
         <div className='w-full flex gap-6 mt-4'>
@@ -22,10 +26,11 @@ const LearningList: FC = () => {
                             variant='search'
                             placeholder={t('service.search')}
                             className='bg-white w-full'
+                            onChangeSearchFinal={(value) => setSearch(value)}
                         />
                     </div>
 
-                    <div>
+                    {/* <div>
                         <Select
                             items={[
                                 { label: t('all'), value: 'all' },
@@ -34,72 +39,42 @@ const LearningList: FC = () => {
                             ]}
                             className='max-w-[100px]'
                         />
-                    </div>
+                    </div> */}
                 </div>
 
-                <div className='xl:mt-9 mt-4 flex flex-wrap xl:gap-8 gap-6 text-sm'>
-                    <div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
-                        <img src={LearningImage} className='w-full rounded-[20px]' />
-                        <div className='mt-4'>
-                            لورم ایپسوم متن ساختگی با تولید سادگی
-                        </div>
-                        <div className='flex gap-1 text-xs text-description mt-2'>
-                            <div>دیزاین ,</div>
-                            <div>۲۴ دقیقه</div>
+                {
+                    getLearnings.isPending ?
+                        <div className='mt-5'>
+                            <PageLoading />
                         </div>
+                        :
+                        <div className='xl:mt-9 mt-4 flex flex-wrap xl:gap-8 gap-6 text-sm'>
+                            {
+                                getLearnings.data?.data?.learnings?.map((item: LearningItemType) => {
+                                    return (
+                                        <div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
+                                            <img src={item.coverUrl} className='w-full rounded-[20px]' />
+                                            <div className='mt-4'>
+                                                {item.title}
+                                            </div>
+                                            <div className='flex gap-1 text-xs text-description mt-2'>
+                                                <div>{item.category.name} ,</div>
+                                                <div>{item.videoDuration} دقیقه</div>
+                                            </div>
 
-                        <div className='mt-3 text-xs text-description'>
-                            آذر ماه 1403
-                        </div>
-                    </div>
-                    <div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
-                        <img src={LearningImage} className='w-full rounded-[20px]' />
-                        <div className='mt-4'>
-                            لورم ایپسوم متن ساختگی با تولید سادگی
-                        </div>
-                        <div className='flex gap-1 text-xs text-description mt-2'>
-                            <div>دیزاین ,</div>
-                            <div>۲۴ دقیقه</div>
-                        </div>
-
-                        <div className='mt-3 text-xs text-description'>
-                            آذر ماه 1403
-                        </div>
-                    </div>
-
-                    <div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
-                        <img src={LearningImage} className='w-full rounded-[20px]' />
-                        <div className='mt-4'>
-                            لورم ایپسوم متن ساختگی با تولید سادگی
-                        </div>
-                        <div className='flex gap-1 text-xs text-description mt-2'>
-                            <div>دیزاین ,</div>
-                            <div>۲۴ دقیقه</div>
-                        </div>
-
-                        <div className='mt-3 text-xs text-description'>
-                            آذر ماه 1403
-                        </div>
-                    </div>
-                    <div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
-                        <img src={LearningImage} className='w-full rounded-[20px]' />
-                        <div className='mt-4'>
-                            لورم ایپسوم متن ساختگی با تولید سادگی
-                        </div>
-                        <div className='flex gap-1 text-xs text-description mt-2'>
-                            <div>دیزاین ,</div>
-                            <div>۲۴ دقیقه</div>
-                        </div>
-
-                        <div className='mt-3 text-xs text-description'>
-                            آذر ماه 1403
-                        </div>
-                    </div>
+                                            <div className='mt-3 text-xs text-description'>
+                                                {moment(item.createdAt).format('jYYYY/jMM/jDD')}
+                                            </div>
+                                        </div>
+                                    )
+                                })
+                            }
 
 
-                    <div className='min-w-[30%] flex-1 px-4'></div>
-                    <div className='min-w-[30%] flex-1 px-4'></div>
-                </div>
+                            <div className='min-w-[30%] flex-1 px-4'></div>
+                            <div className='min-w-[30%] flex-1 px-4'></div>
+                        </div>
+                }
                 <div className='h-14 xl:hidden'></div>
             </div>
 
diff --git a/src/pages/learning/hooks/useLearningData.ts b/src/pages/learning/hooks/useLearningData.ts
new file mode 100644
index 0000000..1546023
--- /dev/null
+++ b/src/pages/learning/hooks/useLearningData.ts
@@ -0,0 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import * as api from "../service/LearningService";
+
+export const useGetLearnings = (search: string) => {
+  return useQuery({
+    queryKey: ["learnings", search],
+    queryFn: () => api.getLearnings(search),
+  });
+};
diff --git a/src/pages/learning/service/LearningService.ts b/src/pages/learning/service/LearningService.ts
new file mode 100644
index 0000000..e90ee6b
--- /dev/null
+++ b/src/pages/learning/service/LearningService.ts
@@ -0,0 +1,6 @@
+import axios from "../../../config/axios";
+
+export const getLearnings = async (search: string) => {
+  const { data } = await axios.get(`/learnings?q=${search}`);
+  return data;
+};
diff --git a/src/pages/learning/types/LearningTypes.ts b/src/pages/learning/types/LearningTypes.ts
new file mode 100644
index 0000000..bd2d21d
--- /dev/null
+++ b/src/pages/learning/types/LearningTypes.ts
@@ -0,0 +1,16 @@
+export type LearningItemType = {
+  id: string;
+  title: string;
+  description: string;
+  coverUrl: string;
+  videoUrl: string;
+  videoDuration: string;
+  createdAt: string;
+  updatedAt: string;
+  category: {
+    id: string;
+    name: string;
+    createdAt: string;
+    updatedAt: string;
+  };
+};
diff --git a/src/pages/receipts/components/RegisterInfo.tsx b/src/pages/receipts/components/RegisterInfo.tsx
index 590ad80..dd180df 100644
--- a/src/pages/receipts/components/RegisterInfo.tsx
+++ b/src/pages/receipts/components/RegisterInfo.tsx
@@ -17,13 +17,13 @@ const RegisterInfo: FC<Props> = ({ data }) => {
     return (
         <Fragment>
 
-            <div className='mt-8 h-10 text-xs bg-[#FFF2F2] text-[#DB0105] rounded-xl px-4 flex gap-2 items-center'>
+            <div className='mt-8 xl:flex-row flex-col xl:h-10 py-4 xl:py-0 text-xs bg-[#FFF2F2] text-[#DB0105] rounded-xl px-4 flex gap-2 items-center'>
                 <InfoCircle
                     size={18}
                     color='#DB0105'
                     className='min-w-[18px]'
                 />
-                <div className='hidden xl:block'>{t('receip.compelete_financal_info_error')}</div>
+                <div className='text-center xl:text-right'>{t('receip.compelete_financal_info_error')}</div>
 
                 <div className='flex-1 flex xl:justify-end'>
                     <Link to={Pages.financial}>
diff --git a/src/pages/receipts/hooks/useReceiptData.ts b/src/pages/receipts/hooks/useReceiptData.ts
index 701a4d9..8da5d24 100644
--- a/src/pages/receipts/hooks/useReceiptData.ts
+++ b/src/pages/receipts/hooks/useReceiptData.ts
@@ -27,3 +27,9 @@ export const usePayInvoice = () => {
     mutationFn: (variables: string) => api.payInvoice(variables),
   });
 };
+
+export const useRequestApprove = () => {
+  return useMutation({
+    mutationFn: (variables: string) => api.requestApprove(variables),
+  });
+};
diff --git a/src/pages/receipts/service/ReceiptService.ts b/src/pages/receipts/service/ReceiptService.ts
index 3518434..ee93763 100644
--- a/src/pages/receipts/service/ReceiptService.ts
+++ b/src/pages/receipts/service/ReceiptService.ts
@@ -10,6 +10,11 @@ export const getInvoiceDetail = async (id: string) => {
   return data;
 };
 
+export const requestApprove = async (id: string) => {
+  const { data } = await axios.patch(`/invoices/${id}/approve/request`);
+  return data;
+};
+
 export const approveInvoice = async (id: string) => {
   const { data } = await axios.patch(`/invoices/${id}/approve`);
   return data;
diff --git a/src/pages/receipts/types/ReceiptTypes.ts b/src/pages/receipts/types/ReceiptTypes.ts
index 69f480f..269e850 100644
--- a/src/pages/receipts/types/ReceiptTypes.ts
+++ b/src/pages/receipts/types/ReceiptTypes.ts
@@ -29,3 +29,14 @@ export type ReceiptDetailItemType = {
   totalPrice: number;
   subscriptionPlan?: string | null;
 };
+
+export type RequestApproveInvoiceType = {
+  phone: string;
+  id: string;
+};
+
+export type ApproveInvoiceType = {
+  phone: string;
+  code: string;
+  id: string;
+};
diff --git a/src/pages/wallet/Wallet.tsx b/src/pages/wallet/Wallet.tsx
index f4eab15..b811172 100644
--- a/src/pages/wallet/Wallet.tsx
+++ b/src/pages/wallet/Wallet.tsx
@@ -5,10 +5,13 @@ import Tabs from '../../components/Tabs'
 import Online from './components/Online'
 import CardtoCard from './components/CardtoCard'
 import Sheba from './components/Sheba'
+import { useGetWalletBalance } from './hooks/useWalletData'
+import { NumberFormat } from '../../config/func'
 
 const Wallet: FC = () => {
 
     const { t } = useTranslation('global')
+    const getWalletBalance = useGetWalletBalance()
     const [activeTab, setActiveTab] = useState<string>('online')
 
     return (
@@ -17,6 +20,15 @@ const Wallet: FC = () => {
                 {t('wallet.increese_wallet')}
             </div>
 
+            <div className='mt-7 xl:px-10 px-6 w-full items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 flex h-[70px] justify-between rounded-[32px] bg-white bg-opacity-45'>
+                <div className='xl:text-base text-sm'>{t('wallet.balance')}</div>
+
+                <div className='h-8 text-black rounded-xl text-sm gap-1 w-fit xl:px-14 px-4 bg-[#EEF0F7] flex items-center'>
+                    {NumberFormat(getWalletBalance.data?.data?.balance)}
+                    <div>تومان</div>
+                </div>
+            </div>
+
             <div className='mt-8 flex gap-6'>
                 <div className='flex-1'>
                     <Tabs
diff --git a/src/pages/wallet/hooks/useWalletData.ts b/src/pages/wallet/hooks/useWalletData.ts
index 8faf5a9..43975e6 100644
--- a/src/pages/wallet/hooks/useWalletData.ts
+++ b/src/pages/wallet/hooks/useWalletData.ts
@@ -9,6 +9,13 @@ export const useGetGetWays = () => {
   });
 };
 
+export const useGetWalletBalance = () => {
+  return useQuery({
+    queryKey: ["wallet-balance"],
+    queryFn: api.getWalletBalance,
+  });
+};
+
 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
index 7123f2b..b685c33 100644
--- a/src/pages/wallet/service/WalletService.ts
+++ b/src/pages/wallet/service/WalletService.ts
@@ -6,6 +6,11 @@ export const getGetWays = async () => {
   return data;
 };
 
+export const getWalletBalance = async () => {
+  const { data } = await axios.get(`/wallets/balance`);
+  return data;
+};
+
 export const payment = async (params: PaymentType) => {
   const { data } = await axios.post(`/payments/deposit/gateway`, params);
   return data;