Unify workspace dropdowns; Update layouts (#458)

Unified Account and Workspace drop-downs; Layout updates, now header lives within the PageBody component; Sidebars now use floating variant

apps/web/app/[locale]/home/[account]/billing/_components/embedded-checkout-form.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export const EmbeddedCheckoutForm = dynamic(
+  async () => {
+    const { EmbeddedCheckout } = await import('@kit/billing-gateway/checkout');
+
+    return EmbeddedCheckout;
+  },
+  {
+    ssr: false,
+  },
+);

apps/web/app/[locale]/home/[account]/billing/_components/team-account-checkout-form.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useState } from 'react';
+
+import dynamic from 'next/dynamic';
+import { useParams } from 'next/navigation';
+
+import { TriangleAlertIcon } from 'lucide-react';
+import { useAction } from 'next-safe-action/hooks';
+
+import { PlanPicker } from '@kit/billing-gateway/components';
+import { useAppEvents } from '@kit/shared/events';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import billingConfig from '~/config/billing.config';
+
+import { createTeamAccountCheckoutSession } from '../_lib/server/server-actions';
+
+const EmbeddedCheckout = dynamic(
+  async () => {
+    const { EmbeddedCheckout } = await import('@kit/billing-gateway/checkout');
+
+    return {
+      default: EmbeddedCheckout,
+    };
+  },
+  {
+    ssr: false,
+  },
+);
+
+export function TeamAccountCheckoutForm(params: {
+  accountId: string;
+  customerId: string | null | undefined;
+}) {
+  const routeParams = useParams();
+  const appEvents = useAppEvents();
+
+  const [checkoutToken, setCheckoutToken] = useState<string | undefined>(
+    undefined,
+  );
+  const [error, setError] = useState(false);
+
+  const { execute, isPending } = useAction(createTeamAccountCheckoutSession, {
+    onSuccess: ({ data }) => {
+      if (data?.checkoutToken) {
+        setCheckoutToken(data.checkoutToken);
+      }
+    },
+    onError: () => {
+      setError(true);
+    },
+  });
+
+  // If the checkout token is set, render the embedded checkout component
+  if (checkoutToken) {
+    return (
+      <EmbeddedCheckout
+        checkoutToken={checkoutToken}
+        provider={billingConfig.provider}
+        onClose={() => setCheckoutToken(undefined)}
+      />
+    );
+  }
+
+  // only allow trial if the user is not already a customer
+  const canStartTrial = !params.customerId;
+
+  // Otherwise, render the plan picker component
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          <Trans i18nKey={'billing.manageTeamPlan'} />
+        </CardTitle>
+
+        <CardDescription>
+          <Trans i18nKey={'billing.manageTeamPlanDescription'} />
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent className={'space-y-4'}>
+        <If condition={error}>
+          <Alert variant={'destructive'}>
+            <TriangleAlertIcon className={'h-4'} />
+
+            <AlertTitle>
+              <Trans i18nKey={'common.planPickerAlertErrorTitle'} />
+            </AlertTitle>
+
+            <AlertDescription>
+              <Trans i18nKey={'common.planPickerAlertErrorDescription'} />
+            </AlertDescription>
+          </Alert>
+        </If>
+
+        <PlanPicker
+          pending={isPending}
+          config={billingConfig}
+          canStartTrial={canStartTrial}
+          onSubmit={({ planId, productId }) => {
+            const slug = routeParams.account as string;
+
+            appEvents.emit({
+              type: 'checkout.started',
+              payload: {
+                planId,
+                account: slug,
+              },
+            });
+
+            execute({
+              planId,
+              productId,
+              slug,
+              accountId: params.accountId,
+            });
+          }}
+        />
+      </CardContent>
+    </Card>
+  );
+}

apps/web/app/[locale]/home/[account]/billing/_components/team-billing-portal-form.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useAction } from 'next-safe-action/hooks';
+
+import { BillingPortalCard } from '@kit/billing-gateway/components';
+
+import { createBillingPortalSession } from '../_lib/server/server-actions';
+
+export function TeamBillingPortalForm({
+  accountId,
+  slug,
+}: {
+  accountId: string;
+  slug: string;
+}) {
+  const { execute } = useAction(createBillingPortalSession);
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        execute({ accountId, slug });
+      }}
+    >
+      <BillingPortalCard />
+    </form>
+  );
+}