Revert "Unify workspace dropdowns; Update layouts (#458)"

This reverts commit 4bc8448a1d.
2026-03-11 14:47:47 +08:00
parent 4bc8448a1d
commit 4912e402a3
530 changed files with 11182 additions and 14382 deletions
--- a/apps/web/app/home/[account]/billing/page.tsx
+++ b/apps/web/app/home/[account]/billing/page.tsx
@@ -0,0 +1,154 @@
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+
+import { resolveProductPlan } from '@kit/billing-gateway';
+import {
+  BillingPortalCard,
+  CurrentLifetimeOrderCard,
+  CurrentSubscriptionCard,
+} from '@kit/billing-gateway/components';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
+import { If } from '@kit/ui/if';
+import { PageBody } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+import { cn } from '@kit/ui/utils';
+
+import billingConfig from '~/config/billing.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+// local imports
+import { TeamAccountLayoutPageHeader } from '../_components/team-account-layout-page-header';
+import { loadTeamAccountBillingPage } from '../_lib/server/team-account-billing-page.loader';
+import { loadTeamWorkspace } from '../_lib/server/team-account-workspace.loader';
+import { TeamAccountCheckoutForm } from './_components/team-account-checkout-form';
+import { createBillingPortalSession } from './_lib/server/server-actions';
+
+interface TeamAccountBillingPageProps {
+  params: Promise<{ account: string }>;
+}
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('teams:billing.pageTitle');
+
+  return {
+    title,
+  };
+};
+
+async function TeamAccountBillingPage({ params }: TeamAccountBillingPageProps) {
+  const account = (await params).account;
+  const workspace = await loadTeamWorkspace(account);
+  const accountId = workspace.account.id;
+
+  const [subscription, order, customerId] =
+    await loadTeamAccountBillingPage(accountId);
+
+  const variantId = subscription?.items[0]?.variant_id;
+  const orderVariantId = order?.items[0]?.variant_id;
+
+  const subscriptionProductPlan = variantId
+    ? await resolveProductPlan(billingConfig, variantId, subscription.currency)
+    : undefined;
+
+  const orderProductPlan = orderVariantId
+    ? await resolveProductPlan(billingConfig, orderVariantId, order.currency)
+    : undefined;
+
+  const hasBillingData = subscription || order;
+
+  const canManageBilling =
+    workspace.account.permissions.includes('billing.manage');
+
+  const shouldShowBillingPortal = canManageBilling && customerId;
+
+  return (
+    <>
+      <TeamAccountLayoutPageHeader
+        account={account}
+        title={<Trans i18nKey={'common:routes.billing'} />}
+        description={<AppBreadcrumbs />}
+      />
+
+      <PageBody>
+        <div className={cn(`flex max-w-2xl flex-col space-y-4`)}>
+          <If condition={!hasBillingData}>
+            <If
+              condition={canManageBilling}
+              fallback={<CannotManageBillingAlert />}
+            >
+              <TeamAccountCheckoutForm
+                customerId={customerId}
+                accountId={accountId}
+              />
+            </If>
+          </If>
+
+          <If condition={subscription}>
+            {(subscription) => {
+              return (
+                <CurrentSubscriptionCard
+                  subscription={subscription}
+                  product={subscriptionProductPlan!.product}
+                  plan={subscriptionProductPlan!.plan}
+                />
+              );
+            }}
+          </If>
+
+          <If condition={order}>
+            {(order) => {
+              return (
+                <CurrentLifetimeOrderCard
+                  order={order}
+                  product={orderProductPlan!.product}
+                  plan={orderProductPlan!.plan}
+                />
+              );
+            }}
+          </If>
+
+          {shouldShowBillingPortal ? (
+            <BillingPortalForm accountId={accountId} account={account} />
+          ) : null}
+        </div>
+      </PageBody>
+    </>
+  );
+}
+
+export default withI18n(TeamAccountBillingPage);
+
+function CannotManageBillingAlert() {
+  return (
+    <Alert variant={'warning'}>
+      <ExclamationTriangleIcon className={'h-4'} />
+
+      <AlertTitle>
+        <Trans i18nKey={'billing:cannotManageBillingAlertTitle'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'billing:cannotManageBillingAlertDescription'} />
+      </AlertDescription>
+    </Alert>
+  );
+}
+
+function BillingPortalForm({
+  accountId,
+  account,
+}: {
+  accountId: string;
+  account: string;
+}) {
+  return (
+    <form action={createBillingPortalSession}>
+      <input type="hidden" name={'accountId'} value={accountId} />
+      <input type="hidden" name={'slug'} value={account} />
+
+      <BillingPortalCard />
+    </form>
+  );
+}