1
- import React , { useEffect , useState } from "react" ;
2
- import { useParams } from "react-router" ;
3
- import { Button } from "@mantine/core" ;
4
- import { IconDownload } from "@tabler/icons-react" ;
5
- import { t } from "@lingui/macro" ;
6
- import { useGetEvent } from "../../../queries/useGetEvent" ;
7
- import { useGetEventOrders } from "../../../queries/useGetEventOrders" ;
8
- import { PageTitle } from "../../common/PageTitle" ;
9
- import { PageBody } from "../../common/PageBody" ;
10
- import { OrdersTable } from "../../common/OrdersTable" ;
11
- import { SearchBarWrapper } from "../../common/SearchBar" ;
12
- import { Pagination } from "../../common/Pagination" ;
13
- import { ToolBar } from "../../common/ToolBar" ;
14
- import { useFilterQueryParamSync } from "../../../hooks/useFilterQueryParamSync" ;
15
- import { IdParam , QueryFilters , QueryFilterOperator } from "../../../types" ;
16
- import { TableSkeleton } from "../../common/TableSkeleton" ;
17
- import { orderClient } from "../../../api/order.client" ;
18
- import { downloadBinary } from "../../../utilites/download" ;
19
- import { showError } from "../../../utilites/notifications" ;
1
+ import React , { useState } from "react" ;
2
+ import { useParams } from "react-router" ;
3
+ import { Button } from "@mantine/core" ;
4
+ import { IconDownload } from "@tabler/icons-react" ;
5
+ import { t } from "@lingui/macro" ;
6
+ import { useGetEvent } from "../../../queries/useGetEvent" ;
7
+ import { useGetEventOrders } from "../../../queries/useGetEventOrders" ;
8
+ import { PageTitle } from "../../common/PageTitle" ;
9
+ import { PageBody } from "../../common/PageBody" ;
10
+ import { OrdersTable } from "../../common/OrdersTable" ;
11
+ import { SearchBarWrapper } from "../../common/SearchBar" ;
12
+ import { Pagination } from "../../common/Pagination" ;
13
+ import { ToolBar } from "../../common/ToolBar" ;
14
+ import { useFilterQueryParamSync } from "../../../hooks/useFilterQueryParamSync" ;
15
+ import { IdParam , QueryFilterOperator , QueryFilters } from "../../../types" ;
16
+ import { TableSkeleton } from "../../common/TableSkeleton" ;
17
+ import { orderClient } from "../../../api/order.client" ;
18
+ import { downloadBinary } from "../../../utilites/download" ;
20
19
import { FilterModal , FilterOption } from "../../common/FilterModal" ;
21
20
import { withLoadingNotification } from "../../../utilites/withLoadingNotification.tsx" ;
22
21
23
22
const orderStatuses = [
24
- { label : t `Completed` , value : 'COMPLETED' } ,
25
- { label : t `Cancelled` , value : 'CANCELLED' } ,
26
- { label : t `Awaiting Offline Payment` , value : 'AWAITING_OFFLINE_PAYMENT' } ,
23
+ { label : t `Completed` , value : 'COMPLETED' } ,
24
+ { label : t `Cancelled` , value : 'CANCELLED' } ,
25
+ { label : t `Awaiting Offline Payment` , value : 'AWAITING_OFFLINE_PAYMENT' } ,
27
26
] ;
28
27
29
28
const refundStatuses = [
30
- { label : t `Refunded` , value : 'REFUNDED' } ,
31
- { label : t `Partially Refunded` , value : 'PARTIALLY_REFUNDED' } ,
29
+ { label : t `Refunded` , value : 'REFUNDED' } ,
30
+ { label : t `Partially Refunded` , value : 'PARTIALLY_REFUNDED' } ,
32
31
] ;
33
32
34
33
export const Orders : React . FC = ( ) => {
35
- const { eventId } = useParams < { eventId : string } > ( ) ;
36
- const { data : event } = useGetEvent ( eventId ) ;
34
+ const { eventId} = useParams < { eventId : string } > ( ) ;
35
+ const { data : event } = useGetEvent ( eventId ) ;
37
36
const [ searchParams , setSearchParams ] = useFilterQueryParamSync ( ) ;
38
37
const ordersQuery = useGetEventOrders ( eventId , searchParams as QueryFilters ) ;
39
38
const orders = ordersQuery ?. data ?. data ;
@@ -61,10 +60,10 @@ export const Orders: React.FC = () => {
61
60
filterFields : {
62
61
...( searchParams . filterFields || { } ) ,
63
62
status : values . status ?. length > 0
64
- ? { operator : QueryFilterOperator . In , value : values . status }
63
+ ? { operator : QueryFilterOperator . In , value : values . status }
65
64
: undefined ,
66
65
refund_status : values . refund_status ?. length > 0
67
- ? { operator : QueryFilterOperator . In , value : values . refund_status }
66
+ ? { operator : QueryFilterOperator . In , value : values . refund_status }
68
67
: undefined
69
68
}
70
69
} ;
@@ -82,26 +81,26 @@ export const Orders: React.FC = () => {
82
81
83
82
const handleExport = async ( eventId : IdParam ) => {
84
83
await withLoadingNotification ( async ( ) => {
85
- setDownloadPending ( true ) ;
86
- const blob = await orderClient . exportOrders ( eventId ) ;
87
- downloadBinary ( blob , 'orders.xlsx' ) ;
88
- } ,
89
- {
90
- loading : {
91
- title : t `Exporting Orders` ,
92
- message : t `Please wait while we prepare your orders for export...`
93
- } ,
94
- success : {
95
- title : t `Orders Exported` ,
96
- message : t `Your orders have been exported successfully.` ,
97
- onRun : ( ) => setDownloadPending ( false )
84
+ setDownloadPending ( true ) ;
85
+ const blob = await orderClient . exportOrders ( eventId ) ;
86
+ downloadBinary ( blob , 'orders.xlsx' ) ;
98
87
} ,
99
- error : {
100
- title : t `Failed to export orders` ,
101
- message : t `Please try again.` ,
102
- onRun : ( ) => setDownloadPending ( false )
103
- }
104
- } ) ;
88
+ {
89
+ loading : {
90
+ title : t `Exporting Orders` ,
91
+ message : t `Please wait while we prepare your orders for export...`
92
+ } ,
93
+ success : {
94
+ title : t `Orders Exported` ,
95
+ message : t `Your orders have been exported successfully.` ,
96
+ onRun : ( ) => setDownloadPending ( false )
97
+ } ,
98
+ error : {
99
+ title : t `Failed to export orders` ,
100
+ message : t `Please try again.` ,
101
+ onRun : ( ) => setDownloadPending ( false )
102
+ }
103
+ } ) ;
105
104
} ;
106
105
107
106
const currentFilters = {
@@ -133,7 +132,7 @@ export const Orders: React.FC = () => {
133
132
>
134
133
< Button
135
134
onClick = { ( ) => handleExport ( eventId ) }
136
- rightSection = { < IconDownload size = { 14 } /> }
135
+ rightSection = { < IconDownload size = { 14 } /> }
137
136
color = "green"
138
137
loading = { downloadPending }
139
138
size = "sm"
@@ -142,16 +141,16 @@ export const Orders: React.FC = () => {
142
141
</ Button >
143
142
</ ToolBar >
144
143
145
- < TableSkeleton isVisible = { ! orders || ordersQuery . isFetching } />
144
+ < TableSkeleton isVisible = { ! orders || ordersQuery . isFetching } />
146
145
147
146
{ orders && event && (
148
- < OrdersTable event = { event } orders = { orders } />
147
+ < OrdersTable event = { event } orders = { orders } />
149
148
) }
150
149
151
150
{ ! ! orders ?. length && (
152
151
< Pagination
153
152
value = { searchParams . pageNumber }
154
- onChange = { ( value ) => setSearchParams ( { pageNumber : value } ) }
153
+ onChange = { ( value ) => setSearchParams ( { pageNumber : value } ) }
155
154
total = { Number ( pagination ?. last_page ) }
156
155
/>
157
156
) }
0 commit comments