import { useCustomer } from '@tagadapay/headless-sdk/react';
function CustomerDashboard({ customerId }: { customerId: string }) {
const {
customer,
orders,
subscriptions,
isLoading,
error,
loadCustomer,
loadOrders,
loadSubscriptions,
updateProfile,
} = useCustomer(customerId); // auto-loads profile when customerId is provided
useEffect(() => {
if (customerId) {
loadOrders(customerId);
loadSubscriptions(customerId);
}
}, [customerId]);
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<div>
<h1>Welcome, {customer?.firstName}</h1>
<h2>Orders</h2>
{orders.map((order) => (
<div key={order.id}>
Order #{order.orderNumber} — {order.status}
</div>
))}
<h2>Subscriptions</h2>
{subscriptions.map((sub) => (
<div key={sub.id}>
{sub.name} — {sub.status}
</div>
))}
</div>
);
}