B2B-88: add starter kit structure and elements

app/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,
+  },
+);

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

@@ -0,0 +1,106 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+
+import dynamic from 'next/dynamic';
+import { useParams } from 'next/navigation';
+
+import { PlanPicker } from '@kit/billing-gateway/components';
+import { useAppEvents } from '@kit/shared/events';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
+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 [pending, startTransition] = useTransition();
+  const appEvents = useAppEvents();
+
+  const [checkoutToken, setCheckoutToken] = useState<string | undefined>(
+    undefined,
+  );
+
+  // 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>
+        <PlanPicker
+          pending={pending}
+          config={billingConfig}
+          canStartTrial={canStartTrial}
+          onSubmit={({ planId, productId }) => {
+            startTransition(async () => {
+              const slug = routeParams.account as string;
+
+              appEvents.emit({
+                type: 'checkout.started',
+                payload: {
+                  planId,
+                  account: slug,
+                },
+              });
+
+              const { checkoutToken } = await createTeamAccountCheckoutSession({
+                planId,
+                productId,
+                slug,
+                accountId: params.accountId,
+              });
+
+              setCheckoutToken(checkoutToken);
+            });
+          }}
+        />
+      </CardContent>
+    </Card>
+  );
+}