diff --git a/src/helpers/func.ts b/src/helpers/func.ts index c3f4700..c432bb9 100644 --- a/src/helpers/func.ts +++ b/src/helpers/func.ts @@ -25,3 +25,11 @@ export const formatDateShort = (dateString: string): string => { return dateString; } }; + +export const formatPrice = (price: number): string => { + return new Intl.NumberFormat("fa-IR", { + style: "decimal", + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(price); +}; diff --git a/src/pages/orders/Detail.tsx b/src/pages/orders/Detail.tsx index 630e53e..2cb69de 100644 --- a/src/pages/orders/Detail.tsx +++ b/src/pages/orders/Detail.tsx @@ -1,15 +1,237 @@ import { type FC } from 'react' -// import { useParams } from 'react-router-dom' -// import { useGetOrderDetailUser } from './hooks/useOrderData' +import { useParams } from 'react-router-dom' +import { useGetOrderDetailUser } from './hooks/useOrderData' +import PageLoading from '@/components/PageLoading' +import { formatDate, formatPrice } from '@/helpers/func' +import StatusWithText from '@/components/StatusWithText' +import { OrdersStatus, PaymentStatus, OrderItemsStatus } from './enum/Enum' +import { Profile, Calendar, Money3, Truck, Box, Location } from 'iconsax-react' const OrderDetail: FC = () => { + const { id } = useParams() + const { data, isLoading, error } = useGetOrderDetailUser(id!) - // const { id } = useParams() - // const { data, isLoading, error } = useGetOrderDetailUser(id!) + if (isLoading) { + return + } + + if (error) { + return ( +
+
+
خطا در بارگذاری داده‌ها
+
لطفا دوباره تلاش کنید
+
+
+ ) + } + + if (!data?.results?.order) { + return ( +
+
+
سفارش یافت نشد
+
+
+ ) + } + + const order = data.results.order + + const getOrderStatusVariant = (status: string) => { + switch (status) { + case OrdersStatus.Delivered: + return 'success' + case OrdersStatus.Cancelled: + case OrdersStatus.cancelled_system: + return 'error' + default: + return 'warning' + } + } + + const getPaymentStatusVariant = (status: string) => { + switch (status) { + case PaymentStatus.Completed: + return 'success' + case PaymentStatus.Cancelled: + return 'error' + default: + return 'warning' + } + } + + const getOrderItemStatusVariant = (status: string) => { + switch (status) { + case OrderItemsStatus.Delivered: + return 'success' + case OrderItemsStatus.Returned: + case OrderItemsStatus.cancelled_shop: + case OrderItemsStatus.cancelled_system: + case OrderItemsStatus.cancelled_user: + return 'error' + default: + return 'warning' + } + } return ( -
- asd +
+ {/* هدر */} +
+
+

جزئیات سفارش

+ +
+
+ شماره سفارش: #{order._id} +
+
+ + {/* کارت‌های اطلاعاتی */} +
+ {/* اطلاعات کاربر */} +
+
+
+ +
+

مشتری

+
+
+
{order.user.fullName}
+
+ +
+ {order.createdAt} +
+
+
+
+ + {/* اطلاعات پرداخت */} +
+
+
+ +
+

پرداخت

+
+
+
+ {formatPrice(order.payment.totalPrice)} تومان +
+
+ {order.payment.payment_method.title_fa} +
+ +
+
+ + {/* آدرس ارسال */} +
+
+
+ +
+

آدرس ارسال

+
+
+
{order.shipmentAddress.address}
+
+
استان: {order.shipmentAddress.province}
+
شهر: {order.shipmentAddress.city}
+
پلاک: {order.shipmentAddress.plaque}
+
کد پستی: {order.shipmentAddress.postalCode}
+
تلفن: {order.shipmentAddress.phone}
+
+
+
+
+ + {/* آیتم‌های سفارش */} +
+
+
+ +
+

آیتم‌های سفارش

+
+ +
+ {order.orderItems.map((item, index) => ( +
+
+
+
+ +
+
+
فروشگاه: {item.shop?.shopName}
+
+ + {item.trackCode && ( + + کد پیگیری: {item.trackCode} + + )} +
+
+
+ +
+
مجموع
+
+ {formatPrice(item.totalPaymentPrice)} تومان +
+ {item.postingDate && ( +
+ ارسال: {formatDate(item.postingDate)} +
+ )} +
+
+ + {/* محصولات */} +
+ {item.shipmentItems.map((product, productIndex) => ( +
+
+
{product.product.title_fa}
+
+
گارانتی: {product.variant.warranty.name}
+
تعداد: {product.quantity}
+
قیمت واحد: {formatPrice(product.selling_price)} تومان
+
+
+ +
+
+ {formatPrice(product.quantity * product.selling_price)} تومان +
+ {product.discount_percent > 0 && ( +
+ تخفیف: {product.discount_percent}% +
+ )} +
+
+ ))} +
+
+ ))} +
+
+
) } diff --git a/src/pages/orders/service/OrderService.ts b/src/pages/orders/service/OrderService.ts index a703ddd..f7295db 100644 --- a/src/pages/orders/service/OrderService.ts +++ b/src/pages/orders/service/OrderService.ts @@ -1,5 +1,8 @@ import axios from "../../../config/axios"; -import type { NativeOrdersResponseType } from "../types/Types"; +import type { + NativeOrdersResponseType, + OrderDetailResponseType, +} from "../types/Types"; export const getNativeOrders = async ( page: number = 1, @@ -21,7 +24,9 @@ export const getSellerOrders = async ( return data; }; -export const getOrderDetailUser = async (id: string) => { - const { data } = await axios.get(`/order/${id}/user`); +export const getOrderDetailUser = async ( + id: string +): Promise => { + const { data } = await axios.get(`/admin/orders/${id}/user`); return data; }; diff --git a/src/pages/orders/types/Types.ts b/src/pages/orders/types/Types.ts index ab12099..1e244cf 100644 --- a/src/pages/orders/types/Types.ts +++ b/src/pages/orders/types/Types.ts @@ -93,7 +93,7 @@ export type ProductType = { specifications: SpecificationType[]; brand: BrandType; category: CategoryType; - variants: string[]; + variants: { _id: string }[]; }; export type ImagesUrlType = { @@ -114,6 +114,18 @@ export type CategoryType = { _id: string; }; +export type WarrantyType = { + _id: number; + duration: string; + logoUrl: string; + name: string; +}; + +export type MeterageType = { + _id: number; + value: string; +}; + export type VariantType = { _id: string; market_status: string; @@ -123,10 +135,8 @@ export type VariantType = { isFreeShip: boolean; isWholeSale: boolean; shop: ShopType; - saleFormat: SaleFormatType; - warranty: number; - size?: number; - meterage?: number; + warranty: WarrantyType; + meterage: MeterageType; }; export type PriceType = { @@ -146,6 +156,14 @@ export type SaleFormatType = { export type ShopType = { _id: string; + shopName?: string; + shopCode?: number; + owner?: string; + shopDescription?: string; + telephoneNumber?: string; + isChatActive?: boolean; + shopPostalCode?: string; + logo?: string; }; export type ShipperType = { @@ -243,3 +261,22 @@ export type NativeOrdersResponseType = { priceRange: PriceRangeType; }; }; + +// تایپ‌های مربوط به جزئیات سفارش +export type OrderDetailType = { + _id: number; + user: UserType; + payment: PaymentType; + orderItems: OrderItemsType[]; + shipmentAddress: ShipmentAddressType; + orderStatus: string; + createdAt: string; +}; + +export type OrderDetailResponseType = { + status: number; + success: boolean; + results: { + order: OrderDetailType; + }; +};