receipt + learning + wallet + ...

2025-02-22 17:07:32 +03:30
parent 1532fbc0ad
commit de7bed95cd
13 changed files with 121 additions and 68 deletions
@@ -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);
 }

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

@@ -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),
+  });
+};
@@ -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;
+};
@@ -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;
+  };
+};
@@ -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}>
@@ -27,3 +27,9 @@ export const usePayInvoice = () => {
    mutationFn: (variables: string) => api.payInvoice(variables),
  });
 };
+
+export const useRequestApprove = () => {
+  return useMutation({
+    mutationFn: (variables: string) => api.requestApprove(variables),
+  });
+};
@@ -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;
@@ -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;
+};
@@ -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
@@ -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),
@@ -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;