my orders
This commit is contained in:
@@ -6,11 +6,12 @@ import Button from '@/components/Button'
|
||||
import { AddSquare } from 'iconsax-react'
|
||||
import Table from '@/components/Table'
|
||||
import { useGetMyOrders } from './hooks/useOrderData'
|
||||
import moment from 'moment-jalaali'
|
||||
|
||||
const MyOrders: FC = () => {
|
||||
|
||||
const [page, setPage] = useState<number>(1)
|
||||
const [activeTab, setActiveTab] = useState<TabMyOrdersEnum>(TabMyOrdersEnum.ALL)
|
||||
const { data } = useGetMyOrders()
|
||||
const { data } = useGetMyOrders(page, activeTab)
|
||||
|
||||
return (
|
||||
<div className='mt-5'>
|
||||
@@ -23,8 +24,7 @@ const MyOrders: FC = () => {
|
||||
items={[
|
||||
{ label: 'همه', value: TabMyOrdersEnum.ALL },
|
||||
{ label: 'در حال انجام', value: TabMyOrdersEnum.IN_PROGRESS },
|
||||
{ label: 'تایید شده', value: TabMyOrdersEnum.CONFIRMED },
|
||||
{ label: 'تحویل داده شده', value: TabMyOrdersEnum.DELIVERED },
|
||||
{ label: 'تکمیل داده شده', value: TabMyOrdersEnum.DELIVERED },
|
||||
{ label: 'کنسل شده', value: TabMyOrdersEnum.CANCELLED },
|
||||
]}
|
||||
activeTab={activeTab}
|
||||
@@ -69,29 +69,31 @@ const MyOrders: FC = () => {
|
||||
<Table
|
||||
columns={[
|
||||
{
|
||||
key: 'id',
|
||||
key: 'orderNumber',
|
||||
title: 'شماره',
|
||||
},
|
||||
{
|
||||
key: 'title',
|
||||
title: 'عنوان',
|
||||
key: 'items',
|
||||
title: 'تعداد اقلام',
|
||||
render: (item) => {
|
||||
return (
|
||||
<div>{item.items.length}</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'createdAt',
|
||||
title: 'زمان ثبت سفارش',
|
||||
render: (item) => {
|
||||
return (
|
||||
<div>{moment(item.createdAt).format('jYYYY-jMM-jDD')}</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'designer',
|
||||
title: 'طراح',
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
title: 'نوع سفارش',
|
||||
},
|
||||
{
|
||||
key: 'itemsCount',
|
||||
title: 'تعداد اقلام',
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: 'وضعیت سفارش',
|
||||
@@ -101,17 +103,12 @@ const MyOrders: FC = () => {
|
||||
title: '',
|
||||
}
|
||||
]}
|
||||
data={[
|
||||
{
|
||||
id: 1,
|
||||
title: 'سفارش 1',
|
||||
createdAt: '2021-01-01',
|
||||
designer: 'طراح 1',
|
||||
type: 'نوع 1',
|
||||
itemsCount: 10,
|
||||
status: 'در حال انجام',
|
||||
},
|
||||
]}
|
||||
data={data?.data}
|
||||
pagination={{
|
||||
currentPage: page,
|
||||
onPageChange: setPage,
|
||||
totalPages: data?.meta?.totalPages || 1
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -15,3 +15,28 @@ export const enum FieldTypeEnum {
|
||||
checkbox = "checkbox",
|
||||
date = "date",
|
||||
}
|
||||
|
||||
export enum OrderStatusEnum {
|
||||
CREATED = "created",
|
||||
|
||||
INVOICED = "invoiced",
|
||||
WAITING_to_CONFIRM_INVOICE = "waiting_to_confirm_invoice",
|
||||
|
||||
DESIGN_INITIATED = "design_initiated",
|
||||
DESIGN_FINISHED = "design_finished",
|
||||
DESIGN_REVISION = "design_revision",
|
||||
|
||||
READY_TO_PRINTING = "ready_to_printing",
|
||||
IN_PRINTING = "in_printing",
|
||||
|
||||
READY_FOR_DELIVERY = "ready_for_delivery",
|
||||
DELIVERED = "delivered",
|
||||
|
||||
AFTER_PRINT_COVER = "after_print_cover",
|
||||
AFTER_PRINT_BOXING = "after_print_boxing",
|
||||
AFTER_PRINT_CARTONING = "after_print_cartoning",
|
||||
|
||||
FINISHED = "finished",
|
||||
|
||||
CANCELED = "canceled",
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import * as api from "../service/OrderService";
|
||||
import type { TabMyOrdersEnum } from "../enum/OrderEnum";
|
||||
|
||||
export const useGetProducts = () => {
|
||||
return useQuery({
|
||||
@@ -14,9 +15,9 @@ export const useSubmitOrder = () => {
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetMyOrders = () => {
|
||||
export const useGetMyOrders = (page: number = 1, statuses: TabMyOrdersEnum) => {
|
||||
return useQuery({
|
||||
queryKey: ["products"],
|
||||
queryFn: api.getMyOrders,
|
||||
queryFn: () => api.getMyOrders(page, statuses),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
import axios from "@/config/axios";
|
||||
import type { OrderType, ProductsResponseType } from "../type/Types";
|
||||
import type {
|
||||
MyOrdersResponseType,
|
||||
OrderType,
|
||||
ProductsResponseType,
|
||||
} from "../type/Types";
|
||||
import { OrderStatusEnum, TabMyOrdersEnum } from "../enum/OrderEnum";
|
||||
|
||||
export const getProducts = async () => {
|
||||
const { data } = await axios.get<ProductsResponseType>(`/public/products`);
|
||||
@@ -11,7 +16,35 @@ export const submitOrder = async (params: OrderType[]) => {
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getMyOrders = async () => {
|
||||
const { data } = await axios.get(`/public/orders`);
|
||||
export const getMyOrders = async (
|
||||
page: number = 1,
|
||||
active: TabMyOrdersEnum,
|
||||
) => {
|
||||
const statuses =
|
||||
active === TabMyOrdersEnum.IN_PROGRESS
|
||||
? [
|
||||
OrderStatusEnum.DESIGN_FINISHED,
|
||||
OrderStatusEnum.DESIGN_INITIATED,
|
||||
OrderStatusEnum.DESIGN_REVISION,
|
||||
OrderStatusEnum.IN_PRINTING,
|
||||
OrderStatusEnum.AFTER_PRINT_BOXING,
|
||||
OrderStatusEnum.AFTER_PRINT_CARTONING,
|
||||
OrderStatusEnum.AFTER_PRINT_COVER,
|
||||
OrderStatusEnum.READY_FOR_DELIVERY,
|
||||
OrderStatusEnum.READY_TO_PRINTING,
|
||||
]
|
||||
: active === TabMyOrdersEnum.CANCELLED
|
||||
? [OrderStatusEnum.CANCELED]
|
||||
: active === TabMyOrdersEnum.DELIVERED
|
||||
? [OrderStatusEnum.DELIVERED]
|
||||
: undefined;
|
||||
|
||||
let query = `?page=${page}`;
|
||||
if (statuses) {
|
||||
query += `statuses=${statuses}`;
|
||||
}
|
||||
const { data } = await axios.get<MyOrdersResponseType>(
|
||||
`/public/orders${query}`,
|
||||
);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { BaseResponse } from "@/shared/types/Types";
|
||||
import type { FieldTypeEnum } from "../enum/OrderEnum";
|
||||
import type { RowDataType } from "@/components/types/TableTypes";
|
||||
|
||||
export type CategoryType = {
|
||||
avatarUrl?: string;
|
||||
@@ -66,3 +67,33 @@ export type StoreType = {
|
||||
items: OrderType[];
|
||||
setItems: (value: OrderType[]) => void;
|
||||
};
|
||||
|
||||
export interface MyOrderType extends RowDataType {
|
||||
balance: number;
|
||||
createdAt: string;
|
||||
discount: number;
|
||||
enableTax: boolean;
|
||||
estimatedDays?: number;
|
||||
orderNumber: number;
|
||||
paidAmount: number;
|
||||
paymentMethod: string;
|
||||
status: string;
|
||||
subTotal: number;
|
||||
taxAmount: number;
|
||||
total: number;
|
||||
items: {
|
||||
adminDescription?: string;
|
||||
attachments: {
|
||||
type: string;
|
||||
url: string;
|
||||
}[];
|
||||
description: string;
|
||||
product: ProductType;
|
||||
quantity: number;
|
||||
subTotal: number;
|
||||
total: number;
|
||||
unitPrice: number;
|
||||
}[];
|
||||
}
|
||||
|
||||
export type MyOrdersResponseType = BaseResponse<MyOrderType[]>;
|
||||
|
||||
Reference in New Issue
Block a user