diff --git a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx b/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
index 396f28fd6..e33b7f0c4 100644
--- a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
@@ -1,3 +1,5 @@
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+
import {
BillingPortalCard,
CurrentSubscriptionCard,
@@ -39,6 +41,31 @@ async function TeamAccountBillingPage({ params }: Params) {
const canManageBilling =
workspace.account.permissions.includes('billing.manage');
+ const Checkout = () => {
+ if (!canManageBilling) {
+ return ;
+ }
+
+ return (
+
+ );
+ };
+
+ const BillingPortal = () => {
+ if (!canManageBilling || !customerId) {
+ return null;
+ }
+
+ return (
+
+ );
+ };
+
return (
<>
-
-
-
-
-
-
+ <>
+
+ >
}
>
- {(data) => (
+ {(subscription) => (
)}
-
-
-
+
@@ -93,7 +106,9 @@ export default withI18n(TeamAccountBillingPage);
function CannotManageBillingAlert() {
return (
-
+
+
+
diff --git a/apps/web/app/(dashboard)/home/[account]/members/page.tsx b/apps/web/app/(dashboard)/home/[account]/members/page.tsx
index 4a492b51c..6a0160faa 100644
--- a/apps/web/app/(dashboard)/home/[account]/members/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/members/page.tsx
@@ -131,10 +131,12 @@ async function TeamAccountMembersPage({ params }: Params) {