receipt + learning + wallet + ...

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);
 }
 

src/langs/fa.json

@@ -331,7 +331,8 @@
     "error_min_price": "حداقل مبلغ ۱۰۰ هزار تومان می باشد",
     "transfer_to_getway": "در حال انتقال به درگاه پرداخت",
     "select_bank_account": "انتخاب کارت",
-    "successful_transfer": "درخواست انتقال وجه با موفقیت انجام شد"
+    "successful_transfer": "درخواست انتقال وجه با موفقیت انجام شد",
+    "balance": "اعتبار فعلی شما "
   },
   "notif": {
     "natification": "اعلان ها"

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'>
+                    getLearnings.isPending ?
-                        <img src={LearningImage} className='w-full rounded-[20px]' />
+                        <div className='mt-5'>
-                        <div className='mt-4'>
+                            <PageLoading />
-                            لورم ایپسوم متن ساختگی با تولید سادگی
-                        </div>
-                        <div className='flex gap-1 text-xs text-description mt-2'>
-                            <div>دیزاین ,</div>
-                            <div>۲۴ دقیقه</div>
                         </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'>
+                                            <div className='mt-3 text-xs text-description'>
-                            آذر ماه 1403
+                                                {moment(item.createdAt).format('jYYYY/jMM/jDD')}
-                        </div>
+                                            </div>
-                    </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='min-w-[30%] flex-1 px-4'></div>
+                            <div className='min-w-[30%] flex-1 px-4'></div>
-                    <div className='min-w-[30%] flex-1 px-4'></div>
+                            <div className='min-w-[30%] flex-1 px-4'></div>
-                </div>
+                        </div>
+                }
                 <div className='h-14 xl:hidden'></div>
             </div>
 

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),
+  });
+};

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;
+};

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;
+  };
+};

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

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),
+  });
+};

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;

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;
+};

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

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),

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;