# disco/1.4.21/backend/views/components/Analytics/pages/CustomerDetails.jsx

Discount Rules for WooCommerce – Disco | Dynamic Pricing, Conditions, Bulk, Bundle, BOGO, version 1.4.21. 55 lines.

- Page: https://pluginprobe.com/plugins/disco/1.4.21/code/backend/views/components/Analytics/pages/CustomerDetails.jsx
- Raw: https://pluginprobe.com/plugins/disco/1.4.21/raw/backend/views/components/Analytics/pages/CustomerDetails.jsx
- Modified: 2026-09-11T05:31:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/disco/1.4.21/code/backend/views/components/Analytics/pages/CustomerDetails.jsx#L10-L20`.

```jsx
import CustomerHeader from '@/components/customers/CustomerHeader';
import CustomerMetrics from '@/components/customers/CustomerMetrics';
import CustomerNotFound from '@/components/customers/CustomerNotFound';
import CustomerOrdersTable from '@/components/customers/CustomerOrdersTable';
import { useGetCustomerQuery } from '@/features/customers/customersApi';
import { selectDateRangeParams } from '@/features/dateRange/dateRangeSlice';
import { useSelector } from 'react-redux';
import { useParams } from 'react-router';

const CustomerDetails = () => {
	const { customerId } = useParams();
	const dateParams = useSelector(selectDateRangeParams);
	const { data, isLoading } = useGetCustomerQuery({
		id: customerId,
		...dateParams,
	});

	const customer = data?.data ?? null;

	if (!isLoading && !customer) {
		return <CustomerNotFound />;
	}

	return (
		<div className="disco:min-h-screen disco:bg-[#f9fafb] disco:px-6 disco:py-2 disco:space-y-3">
			{isLoading ? (
				<div className="disco:space-y-3">
					<div className="disco:h-16 disco:animate-pulse disco:rounded-xl disco:bg-white disco:border disco:border-[#e5e7eb]" />
					<div className="disco:flex disco:gap-3">
						{Array.from({ length: 4 }).map((_, i) => (
							<div
								key={i}
								className="disco:flex-1 disco:h-20 disco:animate-pulse disco:rounded-xl disco:bg-white disco:border disco:border-[#e5e7eb]"
							/>
						))}
					</div>
				</div>
			) : customer ? (
				<>
					<CustomerHeader customer={customer} />
					<CustomerMetrics
						totalSpent={customer.total_spent}
						orders={customer.orders}
						campaignsCount={(customer.campaigns ?? []).length}
					/>
				</>
			) : null}

			<CustomerOrdersTable customerId={customerId} />
		</div>
	);
};

export default CustomerDetails;

```