notification infiti scroll

src/pages/notification/Notification.tsx

@@ -17,11 +17,11 @@ const Notifications: FC = () => {
     // const navigate = useNavigate()
     const { t } = useTranslation('global');
     const ref = useOutsideClick(() => setShowModal(false));
-    const [activeTab, setActiveTab] = useState<'read' | 'unread'>('unread');
+    const [activeTab, setActiveTab] = useState<'seen' | 'unseen'>('unseen');
     const [showModal, setShowModal] = useState<boolean>(false);
     const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
     const readAll = useReadAll()
-    const posts = data?.pages.flatMap((page) => page.data?.notifications || []) || [];
+    const posts = data?.pages.flatMap((page: { data: NotificationItemType[] }) => page.data || []) || [];
     // const getDashboard = useGetDashboard()
 
     const handleAllRead = () => {
@@ -99,19 +99,19 @@ const Notifications: FC = () => {
 
                     <div className="mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden">
                         <div
-                            onClick={() => setActiveTab('unread')}
+                            onClick={() => setActiveTab('unseen')}
                             className={clx(
                                 'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 bg-transparent flex justify-center items-center',
-                                activeTab === 'unread' ? 'bg-white bg-opacity-70 text-black' : ''
+                                activeTab === 'unseen' ? 'bg-white bg-opacity-70 text-black' : ''
                             )}
                         >
                             خوانده نشده
                         </div>
                         <div
-                            onClick={() => setActiveTab('read')}
+                            onClick={() => setActiveTab('seen')}
                             className={clx(
                                 'flex-1 cursor-pointer text-white border-white bg-transparent flex justify-center items-center',
-                                activeTab === 'read' ? 'bg-white bg-opacity-70 text-black' : ''
+                                activeTab === 'seen' ? 'bg-white bg-opacity-70 text-black' : ''
                             )}
                         >
                             خوانده شده
@@ -142,13 +142,13 @@ const Notifications: FC = () => {
                                 posts.map((item: NotificationItemType) => (
                                     <div onClick={() => handleRedirect()} className="bg-white cursor-pointer h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 mb-4 flex" key={item.id}>
                                         {
-                                            !item.isRead &&
+                                            !item.seenAt &&
                                             <div className="mt-1">
                                                 <StatusCircle color="#00BA4B" />
                                             </div>
                                         }
                                         <div>
-                                            <div className="truncate max-w-[200px]">{item.message}</div>
+                                            <div className="truncate max-w-[200px]">{item.content}</div>
                                             <div className="mt-2 flex gap-2 text-[10px] text-description">
                                                 <div>{timeAgo(item.createdAt)}</div>
                                                 <div className="flex gap-1 items-center">

src/pages/notification/hooks/useNotificationData.ts

@@ -1,20 +1,14 @@
 import * as api from "../service/NotificationService";
 import { useInfiniteQuery, useMutation } from "@tanstack/react-query";
 
-export const useGetNotification = (status: "all" | "read" | "unread") => {
+export const useGetNotification = (status: "all" | "seen" | "unseen") => {
   return useInfiniteQuery({
     queryKey: ["notifications", status],
-    queryFn: ({ pageParam = 1 }) => api.getNotifications(pageParam, status), // فراخوانی API برای گرفتن داده‌ها
+    queryFn: ({ pageParam }) =>
-    initialPageParam: 1, // صفحه اول به طور پیشفرض
+      api.getNotifications(pageParam as string | undefined, status), // فراخوانی API برای گرفتن داده‌ها
+    initialPageParam: undefined as string | undefined, // اولین درخواست بدون cursor
     getNextPageParam: (lastPage) => {
-      const currentPage = lastPage.data?.pager?.page;
+      return lastPage.nextCursor || undefined;
-      const totalPages = lastPage.data?.pager?.totalPages;
-
-      if (!currentPage || !totalPages) {
-        return undefined;
-      }
-
-      return currentPage < totalPages ? currentPage + 1 : undefined;
     },
   });
 };

src/pages/notification/service/NotificationService.ts

@@ -2,15 +2,16 @@ import axios from "../../../config/axios";
 import type { GetNotificationsResponse } from "../types/NotificationTypes";
 
 export const getNotifications = async (
-  page: number,
+  cursor: string | undefined,
-  status: "all" | "read" | "unread"
+  status: "all" | "seen" | "unseen"
 ): Promise<GetNotificationsResponse> => {
   let query = ``;
   if (status !== "all") {
-    query = `&isRead=${status === "read" ? 1 : 0}`;
+    query = `&status=${status}`;
   }
+  const cursorParam = cursor ? `&cursor=${cursor}` : ``;
   const { data } = await axios.get<GetNotificationsResponse>(
-    `/admin/notifications?page=${page}${query}`
+    `/admin/notifications?limit=10${cursorParam}${query}`
   );
   return data;
 };

src/pages/notification/types/NotificationTypes.ts

@@ -1,12 +1,32 @@
 import type { IResponse } from "@/types/response.types";
 
+export type NotificationUser = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  firstName: string;
+  lastName: string;
+  birthDate: string;
+  marriageDate: string;
+  referrer: string | null;
+  isActive: boolean;
+  gender: boolean;
+  avatarUrl: string | null;
+  phone: string;
+};
+
 export type NotificationItemType = {
   id: string;
-  title: string;
-  message: string;
   createdAt: string;
-  isRead: boolean;
+  updatedAt: string;
-  type: NotificationTypeEnum;
+  deletedAt: string | null;
+  restaurant: string;
+  user: NotificationUser;
+  admin: string | null;
+  title: string;
+  content: string;
+  seenAt: string | null;
 };
 
 export type NotificationPager = {
@@ -19,7 +39,9 @@ export type NotificationData = {
   pager: NotificationPager;
 };
 
-export type GetNotificationsResponse = IResponse<NotificationData>;
+export type GetNotificationsResponse = IResponse<NotificationItemType[]> & {
+  nextCursor?: string;
+};
 
 export enum NotificationTypeEnum {
   USER_LOGIN = "USER_LOGIN",

src/pages/orders/components/PaymentInfo.tsx

@@ -2,6 +2,8 @@ import type { FC } from 'react'
 import type { Order } from '../types/Types'
 import { PaymentStatusEnum } from '../enum/Enum'
 import { OrderStatus } from '../enum/Enum'
+import { DeliveryMethodEnum } from '@/pages/shipmentMethod/enum/Enum'
+import { PaymentMethodEnum } from '@/pages/paymentMethods/enum/Enum'
 import { formatPrice, formatFaNumber } from '@/helpers/func'
 
 interface PaymentInfoProps {
@@ -19,6 +21,26 @@ const PaymentInfo: FC<PaymentInfoProps> = ({
 }) => {
     const paymentStatus = order.paymentStatus || (order.status === OrderStatus.PAID ? PaymentStatusEnum.Paid : PaymentStatusEnum.Pending)
 
+    const getDeliveryMethodText = (method: string): string => {
+        const methodMap: Record<string, string> = {
+            [DeliveryMethodEnum.DineIn]: 'سرو در رستوران',
+            [DeliveryMethodEnum.CustomerPickup]: 'دریافت از محل',
+            [DeliveryMethodEnum.DeliveryCar]: 'تحویل به خودرو',
+            [DeliveryMethodEnum.DeliveryCourier]: 'بیرون بر',
+        }
+        return methodMap[method] || method
+    }
+
+    const getPaymentMethodText = (method: string): string => {
+        const methodMap: Record<string, string> = {
+            [PaymentMethodEnum.Cash]: 'پرداخت نقدی',
+            [PaymentMethodEnum.Online]: 'پرداخت آنلاین',
+            [PaymentMethodEnum.CardOnDelivery]: 'پرداخت در محل',
+            [PaymentMethodEnum.Wallet]: 'کیف پول',
+        }
+        return methodMap[method] || method
+    }
+
     return (
         <div className='w-[330px] h-fit bg-white rounded-4xl p-8'>
             <div className='flex justify-between items-center'>
@@ -37,11 +59,36 @@ const PaymentInfo: FC<PaymentInfoProps> = ({
             <div className='mt-10'>
                 <div className='flex text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
                     <div className='text-description'>
-                        نوع پرداخت
+                        روش ارسال
                     </div>
-                    <div>{order.paymentMethod?.description || '-'}</div>
+                    <div>{order.deliveryMethod ? getDeliveryMethodText(order.deliveryMethod.method) : '-'}</div>
                 </div>
 
+                {order.deliveryMethod?.description && (
+                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                        <div className='text-description'>
+                            توضیحات روش ارسال
+                        </div>
+                        <div>{order.deliveryMethod.description}</div>
+                    </div>
+                )}
+
+                <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                    <div className='text-description'>
+                        روش پرداخت
+                    </div>
+                    <div>{order.paymentMethod ? getPaymentMethodText(order.paymentMethod.method) : '-'}</div>
+                </div>
+
+                {order.paymentMethod?.description && (
+                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                        <div className='text-description'>
+                            توضیحات روش پرداخت
+                        </div>
+                        <div>{order.paymentMethod.description}</div>
+                    </div>
+                )}
+
                 {order.paymentMethod?.gateway && (
                     <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
                         <div className='text-description'>

src/pages/orders/types/Types.ts

@@ -40,11 +40,11 @@ export interface OrderRestaurant {
   deletedAt: string | null;
   name: string;
   slug: string;
-  logo: string;
+  logo: string | null;
-  address: string;
+  address: string | null;
-  menuColor: string;
+  menuColor: string | null;
-  latitude: number;
+  latitude: number | null;
-  longitude: number;
+  longitude: number | null;
   serviceArea: ServiceArea;
   isActive: boolean;
   establishedYear: number | null;
@@ -52,7 +52,7 @@ export interface OrderRestaurant {
   instagram: string | null;
   telegram: string | null;
   whatsapp: string | null;
-  description: string;
+  description: string | null;
   seoTitle: string | null;
   seoDescription: string | null;
   tagNames: string | null;
@@ -72,8 +72,8 @@ export interface OrderDeliveryMethod {
   restaurant: string;
   deliveryFee: number;
   deliveryFeeType: string;
-  kilometerNumber: number | null;
+  perKilometerFee: number | null;
-  deliveryFeeForKilometer: number | null;
+  distanceBasedMinCost: number | null;
   minOrderPrice: number;
   description: string;
   enabled: boolean;
@@ -124,7 +124,7 @@ export interface OrderFood {
   content: string[];
   price: number;
   order: number | null;
-  prepareTime: number;
+  prepareTime: number | null;
   weekDays: number[];
   mealTypes: string[];
   isActive: boolean;