| 1 |
import CustomerHeader from '@/components/customers/CustomerHeader'; |
| 2 |
import CustomerMetrics from '@/components/customers/CustomerMetrics'; |
| 3 |
import CustomerNotFound from '@/components/customers/CustomerNotFound'; |
| 4 |
import CustomerOrdersTable from '@/components/customers/CustomerOrdersTable'; |
| 5 |
import { useGetCustomerQuery } from '@/features/customers/customersApi'; |
| 6 |
import { selectDateRangeParams } from '@/features/dateRange/dateRangeSlice'; |
| 7 |
import { useSelector } from 'react-redux'; |
| 8 |
import { useParams } from 'react-router'; |
| 9 |
|
| 10 |
const CustomerDetails = () => { |
| 11 |
const { customerId } = useParams(); |
| 12 |
const dateParams = useSelector(selectDateRangeParams); |
| 13 |
const { data, isLoading } = useGetCustomerQuery({ |
| 14 |
id: customerId, |
| 15 |
...dateParams, |
| 16 |
}); |
| 17 |
|
| 18 |
const customer = data?.data ?? null; |
| 19 |
|
| 20 |
if (!isLoading && !customer) { |
| 21 |
return <CustomerNotFound />; |
| 22 |
} |
| 23 |
|
| 24 |
return ( |
| 25 |
<div className="disco:min-h-screen disco:bg-[#f9fafb] disco:px-6 disco:py-2 disco:space-y-3"> |
| 26 |
{isLoading ? ( |
| 27 |
<div className="disco:space-y-3"> |
| 28 |
<div className="disco:h-16 disco:animate-pulse disco:rounded-xl disco:bg-white disco:border disco:border-[#e5e7eb]" /> |
| 29 |
<div className="disco:flex disco:gap-3"> |
| 30 |
{Array.from({ length: 4 }).map((_, i) => ( |
| 31 |
<div |
| 32 |
key={i} |
| 33 |
className="disco:flex-1 disco:h-20 disco:animate-pulse disco:rounded-xl disco:bg-white disco:border disco:border-[#e5e7eb]" |
| 34 |
/> |
| 35 |
))} |
| 36 |
</div> |
| 37 |
</div> |
| 38 |
) : customer ? ( |
| 39 |
<> |
| 40 |
<CustomerHeader customer={customer} /> |
| 41 |
<CustomerMetrics |
| 42 |
totalSpent={customer.total_spent} |
| 43 |
orders={customer.orders} |
| 44 |
campaignsCount={(customer.campaigns ?? []).length} |
| 45 |
/> |
| 46 |
</> |
| 47 |
) : null} |
| 48 |
|
| 49 |
<CustomerOrdersTable customerId={customerId} /> |
| 50 |
</div> |
| 51 |
); |
| 52 |
}; |
| 53 |
|
| 54 |
export default CustomerDetails; |
| 55 |
|
