87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import useSubscription from "../../hooks/use-subscription";
|
|
|
|
export default function BillingHistory() {
|
|
const { payments } = useSubscription();
|
|
|
|
if (payments.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<section className="bg-white pt-6 shadow sm:rounded-md sm:overflow-hidden">
|
|
<div className="px-4 sm:px-6">
|
|
<h2 className="text-lg leading-6 font-medium text-gray-900">Billing history</h2>
|
|
</div>
|
|
<div className="mt-6 flex flex-col">
|
|
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
|
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
|
<div className="overflow-hidden border-t border-gray-200">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th
|
|
scope="col"
|
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Date
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Amount
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Status
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="relative px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
<span className="sr-only">View receipt</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{payments.map((payment) => (
|
|
<tr key={payment.id}>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
<time>{new Date(payment.payout_date).toDateString()}</time>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{Intl.NumberFormat(undefined, {
|
|
style: "currency",
|
|
currency: payment.currency,
|
|
currencyDisplay: "narrowSymbol",
|
|
}).format(payment.amount)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{payment.is_paid === 1 ? "Paid" : "Upcoming"}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
{typeof payment.receipt_url !== "undefined" ? (
|
|
<a
|
|
href={payment.receipt_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary-600 hover:text-primary-900"
|
|
>
|
|
View receipt
|
|
</a>
|
|
) : null}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|