sea-dev 1.0.0

package/apps/main/src/routes/_authed/settings/billing/-components/price-table.tsx

@@ -0,0 +1,129 @@
+import { planFeatures, productMetadataSchema } from "@/lib/billing";
+import { cn } from "@/lib/utils";
+import type { Product } from "@polar-sh/sdk/models/components/product.js";
+import type { ProductPrice } from "@polar-sh/sdk/models/components/productprice.js";
+import type { Plan } from "@sea/db/schema";
+import { Badge } from "@sea/ui/components/ui/badge";
+import { Button } from "@sea/ui/components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader } from "@sea/ui/components/ui/card";
+import { H2 } from "@sea/ui/components/ui/typography";
+import { capitalize } from "@sea/util/fmt";
+import { invariant } from "@sea/util/invariant";
+import { useServerFn } from "@tanstack/react-start";
+import { Check } from "lucide-react";
+import { createCheckoutFn, getPortalFn } from "../-fns";
+
+const planLevel: Record<Plan, number> = {
+  free: 0,
+  starter: 1,
+  growth: 2,
+};
+
+function actionType({ thisPlan, activePlan }: { thisPlan: Plan; activePlan: Plan }) {
+  const thisLevel = planLevel[thisPlan];
+  const activeLevel = planLevel[activePlan];
+
+  if (thisLevel === activeLevel) {
+    return "same";
+  }
+
+  if (thisLevel > activeLevel) {
+    return "upgrade";
+  }
+
+  return "downgrade";
+}
+
+export function PriceCard({
+  product,
+  activePlan,
+  hasSubscription,
+}: {
+  product: Product;
+  activePlan: Plan;
+  hasSubscription: boolean;
+}) {
+  const metadata = productMetadataSchema.parse(product.metadata);
+  const createCheckout = useServerFn(createCheckoutFn);
+  const createPortal = useServerFn(getPortalFn);
+  const { plan } = metadata;
+  const isRecommended = plan === "starter";
+
+  const isActive = plan === activePlan;
+  const action = actionType({ thisPlan: plan, activePlan });
+  const text = action === "same" ? "Active" : capitalize(action);
+
+  const checkout = async () => {
+    if (hasSubscription) {
+      await createPortal();
+    } else {
+      await createCheckout({
+        data: { productId: product.id },
+      });
+    }
+  };
+
+  return (
+    <Card
+      className={cn(
+        isRecommended ? "bg-muted/30 border-primary/20" : "bg-background border-border",
+      )}
+    >
+      {isRecommended && (
+        <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+          <Badge variant="default">Recommended</Badge>
+        </div>
+      )}
+
+      <CardHeader>
+        <H2>{product.name}</H2>
+        {/* Price */}
+        <div className="flex items-baseline gap-1">
+          <span className="text-foreground text-xl font-bold">
+            {product.name === "Growth"
+              ? "Custom"
+              : formatPrice(product.prices.at(0) as ProductPrice | undefined)}
+          </span>
+          <span className="text-muted-foreground text-sm">per month</span>
+        </div>
+      </CardHeader>
+
+      <CardContent>
+        <Button
+          className={cn("w-full", isRecommended && "bg-brand/70 hover:bg-brand")}
+          variant="outline"
+          extra="action"
+          disabled={isActive}
+          onClick={checkout}
+        >
+          {text}
+        </Button>
+      </CardContent>
+
+      <CardFooter>
+        <div className="space-y-4">
+          {planFeatures[plan].map((feature, idx) => (
+            <div key={idx} className="flex items-start gap-3">
+              <Check className="text-primary mt-0.5 h-4 w-4 flex-shrink-0" />
+              <span className="text-foreground text-sm leading-relaxed">{feature}</span>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}
+
+const formatPrice = (price: ProductPrice | undefined) => {
+  invariant(price);
+  if (price.amountType === "free") {
+    return "$0";
+  }
+
+  invariant(price.amountType === "fixed");
+
+  const unitAmount = price.priceAmount;
+  const amount = unitAmount / 100;
+
+  return `$${amount.toLocaleString()}`;
+};

package/apps/main/src/routes/_authed/settings/billing/-fns.ts

@@ -0,0 +1,76 @@
+import { getCustomer, polarClient } from "@/clients/polar";
+import { productMetadataSchema, type SubscriptionMetadata } from "@/lib/billing";
+import { getAppConfig } from "@/lib/config";
+import { membershipMiddleware } from "@/middleware";
+import type { Product } from "@polar-sh/sdk/models/components/product.js";
+import { invariant } from "@sea/util/invariant";
+import { redirect } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+
+const config = getAppConfig();
+
+export const createCheckoutFn = createServerFn()
+  .middleware([membershipMiddleware])
+  .validator((data: { productId: string }) => data)
+  .handler(async ({ context: { member }, data: { productId } }) => {
+    const { id: customerId } = await getCustomer({ member });
+    const metadata: SubscriptionMetadata = { memberId: member.id };
+    const successUrl = new URL(
+      "/api/billing/paid?checkout_id={CHECKOUT_ID}",
+      config.baseUrl,
+    ).toString();
+    const result = await polarClient.checkouts.create({
+      products: [productId],
+      customerId,
+      successUrl,
+      isBusinessCustomer: true,
+      metadata,
+    });
+    const { url } = result;
+    throw redirect({ href: url });
+  });
+
+export const getSubscriptionFn = createServerFn()
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const result = await polarClient.products.list({});
+    const productsRaw: Product[] = [];
+    for await (const page of result) {
+      productsRaw.push(...page.result.items);
+    }
+
+    const plansToShow = ["free", "starter", "growth"];
+    const products = plansToShow.map((plan) => {
+      const product = productsRaw.find((p) => p.metadata.plan === plan);
+      invariant(product, `no product for ${plan}`);
+      return product;
+    });
+
+    const { subscriptionId, plan: orgPlan } = member.organization;
+    const subscription = subscriptionId
+      ? await polarClient.subscriptions.get({ id: subscriptionId })
+      : null;
+
+    const { plan: subPlan } = subscription
+      ? productMetadataSchema.parse(subscription.product.metadata)
+      : { plan: null };
+    const plan = subPlan ?? orgPlan;
+
+    const recentUpgrade = orgPlan !== "free" && subPlan !== orgPlan;
+
+    const hasSubscription = !!subscriptionId;
+
+    return { products, recentUpgrade, plan, hasSubscription };
+  });
+
+export const getPortalFn = createServerFn()
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const { customerId } = member.organization;
+    invariant(customerId, "no customerId");
+    const portal = await polarClient.customerSessions.create({
+      customerId,
+    });
+    const { customerPortalUrl } = portal;
+    throw redirect({ href: customerPortalUrl });
+  });

package/apps/main/src/routes/_authed/settings/billing/index.tsx

@@ -0,0 +1,119 @@
+import { Container } from "@/components/header/container";
+import { Alert, AlertDescription, AlertTitle } from "@sea/ui/components/ui/alert";
+import { Button } from "@sea/ui/components/ui/button";
+import { Highlighted } from "@sea/ui/components/ui/highlight";
+import { H1, Lead } from "@sea/ui/components/ui/typography";
+import { capitalize } from "@sea/util/fmt";
+import { createFileRoute, useNavigate, useRouter } from "@tanstack/react-router";
+import { useServerFn } from "@tanstack/react-start";
+import { CheckCircle2Icon, Loader2Icon } from "lucide-react";
+import { useEffect } from "react";
+import * as z from "zod/v4";
+import { PriceCard } from "./-components/price-table";
+import { getPortalFn, getSubscriptionFn } from "./-fns";
+
+const searchSchema = z.object({
+  status: z.string().optional(),
+});
+
+export const Route = createFileRoute("/_authed/settings/billing/")({
+  validateSearch: searchSchema,
+  loader: () => getSubscriptionFn(),
+  component: BillingSettingsComponent,
+});
+
+const CRUMBS = [
+  { href: "settings", label: "Settings" },
+  { href: "billing", label: "Billing" },
+];
+
+function BillingSettingsComponent() {
+  const router = useRouter();
+  const navigate = useNavigate();
+  const { products, recentUpgrade, plan, hasSubscription } = Route.useLoaderData();
+  const getPortal = useServerFn(getPortalFn);
+  const { member } = Route.useRouteContext();
+  const { status } = Route.useSearch();
+  const { paidUntil } = member.organization;
+
+  useEffect(() => {
+    if (recentUpgrade) {
+      const fn = async () => {
+        const { recentUpgrade: newRecentUpgrade } = await getSubscriptionFn();
+        if (!newRecentUpgrade) {
+          router.invalidate();
+        }
+      };
+
+      fn();
+      const interval = setInterval(fn, 1000);
+      return () => clearInterval(interval);
+    }
+  }, [recentUpgrade]);
+
+  useEffect(() => {
+    if (status) {
+      const timeout = setTimeout(() => {
+        navigate({ to: Route.to, search: { status: undefined } });
+      }, 20_000); // clear status after 20 seconds
+
+      return () => clearTimeout(timeout);
+    }
+  }, [status]);
+
+  return (
+    <Container crumbs={CRUMBS} className="flex flex-col gap-4">
+      <div className="flex justify-between">
+        <div>
+          <H1>Billing</H1>
+          <Lead>
+            You're currently on the <Highlighted>{capitalize(plan)}</Highlighted> plan
+          </Lead>
+        </div>
+        <Button
+          onClick={async () => await getPortal()}
+          disabled={paidUntil === null || !member.organization.customerId}
+        >
+          Manage billing
+        </Button>
+      </div>
+      <div className="border-border bg-muted/30 flex flex-col gap-3 rounded-lg border p-4 md:flex-row md:items-center md:justify-between">
+        <div>
+          <p className="text-sm font-medium">Have questions about billing?</p>
+          <p className="text-muted-foreground text-sm">
+            Contact us with any questions and we&apos;ll help.
+          </p>
+        </div>
+        <Button variant="outline" asChild>
+          <a href="mailto:support@sea.dev?subject=Billing%20question">Contact us</a>
+        </Button>
+      </div>
+      {status === "success" && (
+        <Alert variant="primary">
+          <CheckCircle2Icon />
+          <AlertTitle>Success!</AlertTitle>
+          <AlertDescription>Your subscription is now active!</AlertDescription>
+        </Alert>
+      )}
+      {recentUpgrade && (
+        <Alert variant="default">
+          <Loader2Icon className="animate-spin" />
+          <AlertTitle>Waiting...</AlertTitle>
+          <AlertDescription>Waiting for subscription details to update...</AlertDescription>
+        </Alert>
+      )}
+      <div className="flex w-full justify-center">
+        <div className="grid max-w-3xl gap-2 md:grid-cols-3">
+          {products.map((product) => (
+            <PriceCard
+              key={product.id}
+              product={product}
+              activePlan={plan}
+              hasSubscription={hasSubscription}
+            />
+          ))}
+        </div>
+      </div>
+    </Container>
+  );
+}

package/apps/main/src/routes/_authed/settings/embed.tsx

@@ -0,0 +1,337 @@
+import { Container } from "@/components/header/container";
+import { membershipMiddleware } from "@/middleware";
+import { getDeals } from "@sea/dal/deal";
+import { getForms } from "@sea/dal/form";
+import { styledLinkClassName } from "@sea/ui/components/misc/styled-link";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@sea/ui/components/ui/card";
+import { Input } from "@sea/ui/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@sea/ui/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@sea/ui/components/ui/tabs";
+import { H1 } from "@sea/ui/components/ui/typography";
+import { formatTemplate } from "@sea/util/fmt";
+import { createFileRoute } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { Check, Copy } from "lucide-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import * as z from "zod/v4";
+import { NewApiKeyModal } from "./-components/new-api-key";
+
+const getFormsAndDealsFn = createServerFn()
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const forms = await getForms({ member });
+    const deals = await getDeals({ member });
+    return { forms, deals };
+  });
+
+const searchSchema = z.object({
+  apiKey: z.string().default(""),
+  formId: z.string().default(""),
+  dealId: z.string().default(""),
+});
+
+export const Route = createFileRoute("/_authed/settings/embed")({
+  loader: () => getFormsAndDealsFn(),
+  component: EmbedComponent,
+  validateSearch: searchSchema,
+});
+
+const CRUMBS = [
+  { href: "settings", label: "Settings" },
+  { href: "embed", label: "Embed" },
+];
+
+function EmbedComponent() {
+  const { forms, deals } = Route.useLoaderData();
+  const searchParams = Route.useSearch();
+
+  const [apiKey, setApiKey] = useState(searchParams.apiKey);
+  const [formId, setFormId] = useState(searchParams.formId);
+  const [dealId, setDealId] = useState(searchParams.dealId);
+  const [copiedStates, setCopiedStates] = useState<{ [key: string]: boolean }>({});
+
+  const htmlSnippet = useMemo(
+    () => formatTemplate(htmlSnippetTemplate, { apiKey, containerId, formId, dealId }),
+    [apiKey, formId, dealId],
+  );
+  const reactSnippet = useMemo(
+    () => formatTemplate(reactSnippetTemplate, { apiKey, containerId, formId, dealId }),
+    [apiKey, formId, dealId],
+  );
+  const angularSnippet = useMemo(
+    () => formatTemplate(angularSnippetTemplate, { apiKey, dealId, formId }),
+    [apiKey, dealId, formId],
+  );
+
+  const copyToClipboard = async (text: string, type: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedStates((prev) => ({ ...prev, [type]: true }));
+      toast.success(`${type} copied to clipboard!`);
+
+      setTimeout(() => {
+        setCopiedStates((prev) => ({ ...prev, [type]: false }));
+      }, 1000);
+    } catch (_err) {
+      toast.error("Failed to copy to clipboard");
+    }
+  };
+
+  const CopyButton = ({ text, type }: { text: string; type: string }) => (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={() => copyToClipboard(text, type)}
+      className="absolute top-3 right-3"
+    >
+      {copiedStates[type] ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+    </Button>
+  );
+
+  return (
+    <Container crumbs={CRUMBS}>
+      <H1>Embeddable Widget</H1>
+      <div className="bg-background flex overflow-y-auto p-6">
+        <div className="mx-auto max-w-6xl space-y-8">
+          <div className="grid gap-8 lg:grid-cols-2">
+            {/* Documentation */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Quick Start Guide</CardTitle>
+                <CardDescription>
+                  Follow the official Embeddable Widget quick start in our API docs for the most
+                  accurate setup steps and dependencies.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <p className="text-muted-foreground text-sm">
+                  The published guide covers package installation, style imports, and domain
+                  configuration to ensure the widget renders correctly. Use it as the source of
+                  truth before copying a snippet below.
+                </p>
+                <Button asChild>
+                  <a
+                    href="https://docs.sea.dev/products/embed"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Open Quick Start in docs
+                  </a>
+                </Button>
+              </CardContent>
+            </Card>
+
+            {/* Configuration Options */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Configuration Options</CardTitle>
+                <CardDescription>Customize the widget behavior</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid grid-cols-2 items-center space-y-3">
+                  <div className="border-primary border-l-2 pl-4">
+                    <h4 className="text-sm font-medium">API Key</h4>
+                    <p className="text-muted-foreground text-xs">
+                      Your unique API key for authentication
+                    </p>
+                  </div>
+                  <div className="flex gap-2">
+                    <Input
+                      name="apiKey"
+                      type="password"
+                      value={apiKey}
+                      onChange={(e) => setApiKey(e.target.value)}
+                      required
+                    />
+                    <NewApiKeyModal title="New key" />
+                  </div>
+                  <div className="border-primary border-l-2 pl-4">
+                    <h4 className="text-sm font-medium">Form</h4>
+                    <p className="text-muted-foreground text-xs">Which form to use</p>
+                  </div>
+                  <div className="flex gap-2">
+                    <Select
+                      name="formId"
+                      value={formId}
+                      onValueChange={(value) => setFormId(value)}
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {forms.map((schema) => (
+                          <SelectItem key={schema.id} value={schema.id}>
+                            {schema.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="border-primary border-l-2 pl-4">
+                    <h4 className="text-sm font-medium">Deal</h4>
+                    <p className="text-muted-foreground text-xs">Which deal to use</p>
+                  </div>
+                  <div className="flex gap-2">
+                    <Select
+                      name="dealId"
+                      value={dealId}
+                      onValueChange={(value) => setDealId(value)}
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {deals.map((deal) => (
+                          <SelectItem key={deal.id} value={deal.id}>
+                            {deal.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Code Snippets */}
+            <Card className="lg:col-span-2">
+              <CardHeader className="flex flex-row items-center justify-between">
+                <div>
+                  <CardTitle>Implementation Code</CardTitle>
+                  <CardDescription>
+                    Choose your preferred implementation method and copy the code snippet
+                  </CardDescription>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <Tabs defaultValue="html" className="w-full">
+                  <TabsList className="grid w-full grid-cols-3">
+                    <TabsTrigger value="react">React</TabsTrigger>
+                    <TabsTrigger value="angular">Angular</TabsTrigger>
+                    <TabsTrigger value="html">HTML</TabsTrigger>
+                  </TabsList>
+
+                  <TabsContent value="react" className="relative">
+                    <div className="relative">
+                      <pre className="bg-muted overflow-x-auto rounded-lg p-4 text-sm">
+                        <code>{reactSnippet}</code>
+                      </pre>
+                      <CopyButton text={reactSnippet} type="React" />
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="angular" className="relative">
+                    <div className="relative">
+                      <pre className="bg-muted overflow-x-auto rounded-lg p-4 text-sm">
+                        <code>{angularSnippet}</code>
+                      </pre>
+                      <CopyButton text={angularSnippet} type="Angular" />
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="html" className="relative">
+                    <div className="relative">
+                      <pre className="bg-muted overflow-x-auto rounded-lg p-4 text-sm">
+                        <code>{htmlSnippet}</code>
+                      </pre>
+                      <CopyButton text={htmlSnippet} type="HTML" />
+                    </div>
+                  </TabsContent>
+                </Tabs>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Footer Info */}
+          <Card>
+            <CardContent className="pt-6">
+              <div className="space-y-2 text-center">
+                <h3 className="font-semibold">Need Help?</h3>
+                <p>
+                  Visit our{" "}
+                  <a
+                    href="https://docs.sea.dev"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={styledLinkClassName}
+                  >
+                    docs
+                  </a>{" "}
+                  for more details.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </Container>
+  );
+}
+
+const containerId = "widget-root";
+
+const htmlSnippetTemplate = `<div id='{{containerId}}'></div>
+<script type="module">
+  import { initSeaWidget } from "https://cdn.sea.dev/sea-widget.js";
+  initSeaWidget('{{containerId}}', {
+    apiKey: '{{apiKey}}',
+    dealId: '{{dealId}}',
+    formId: '{{formId}}',
+  });
+</script>`;
+
+const reactSnippetTemplate = `// First install the widget
+// npm install @sea-dev/widget
+
+import { SeaWidget } from "@sea-dev/widget";
+import "@sea-dev/widget/style.css";
+
+export default function YourPage() {
+  return (
+    <div>
+      <p>Widget below here!</p>
+      <SeaWidget apiKey="{{apiKey}}" dealId="{{dealId}}" formId="{{formId}}" className="h-full" />
+    </div>
+  );
+}`;
+
+const angularSnippetTemplate = `// First install the widget
+// npm install @sea-dev/widget
+
+import { Component } from "@angular/core";
+import { SeaWidgetModule } from "@sea-dev/widget/angular";
+import "@sea-dev/widget/style.css";
+
+@Component({
+  selector: "app-root",
+  standalone: true,
+  imports: [SeaWidgetModule],
+  template: \`
+    <sea-widget
+      [apiKey]="apiKey"
+      [dealId]="dealId"
+      [formId]="formId"
+      class="h-full"
+    ></sea-widget>
+  \`,
+})
+export class AppComponent {
+  apiKey = "{{apiKey}}";
+  dealId = "{{dealId}}";
+  formId = "{{formId}}";
+}
+`;

package/apps/main/src/routes/_authed/settings/index.tsx

@@ -0,0 +1,12 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+
+const redirectSettingsFn = createServerFn().handler(async () => {
+  throw redirect({
+    to: "/settings/workspace",
+  });
+});
+
+export const Route = createFileRoute("/_authed/settings/")({
+  loader: () => redirectSettingsFn(),
+});