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" ;
2019import { FilterModal , FilterOption } from "../../common/FilterModal" ;
2120import { withLoadingNotification } from "../../../utilites/withLoadingNotification.tsx" ;
2221
2322const 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' } ,
2726] ;
2827
2928const 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' } ,
3231] ;
3332
3433export 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 ) ;
3736 const [ searchParams , setSearchParams ] = useFilterQueryParamSync ( ) ;
3837 const ordersQuery = useGetEventOrders ( eventId , searchParams as QueryFilters ) ;
3938 const orders = ordersQuery ?. data ?. data ;
@@ -61,10 +60,10 @@ export const Orders: React.FC = () => {
6160 filterFields : {
6261 ...( searchParams . filterFields || { } ) ,
6362 status : values . status ?. length > 0
64- ? { operator : QueryFilterOperator . In , value : values . status }
63+ ? { operator : QueryFilterOperator . In , value : values . status }
6564 : undefined ,
6665 refund_status : values . refund_status ?. length > 0
67- ? { operator : QueryFilterOperator . In , value : values . refund_status }
66+ ? { operator : QueryFilterOperator . In , value : values . refund_status }
6867 : undefined
6968 }
7069 } ;
@@ -82,26 +81,26 @@ export const Orders: React.FC = () => {
8281
8382 const handleExport = async ( eventId : IdParam ) => {
8483 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' ) ;
9887 } ,
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+ } ) ;
105104 } ;
106105
107106 const currentFilters = {
@@ -133,7 +132,7 @@ export const Orders: React.FC = () => {
133132 >
134133 < Button
135134 onClick = { ( ) => handleExport ( eventId ) }
136- rightSection = { < IconDownload size = { 14 } /> }
135+ rightSection = { < IconDownload size = { 14 } /> }
137136 color = "green"
138137 loading = { downloadPending }
139138 size = "sm"
@@ -142,16 +141,16 @@ export const Orders: React.FC = () => {
142141 </ Button >
143142 </ ToolBar >
144143
145- < TableSkeleton isVisible = { ! orders || ordersQuery . isFetching } />
144+ < TableSkeleton isVisible = { ! orders || ordersQuery . isFetching } />
146145
147146 { orders && event && (
148- < OrdersTable event = { event } orders = { orders } />
147+ < OrdersTable event = { event } orders = { orders } />
149148 ) }
150149
151150 { ! ! orders ?. length && (
152151 < Pagination
153152 value = { searchParams . pageNumber }
154- onChange = { ( value ) => setSearchParams ( { pageNumber : value } ) }
153+ onChange = { ( value ) => setSearchParams ( { pageNumber : value } ) }
155154 total = { Number ( pagination ?. last_page ) }
156155 />
157156 ) }
0 commit comments