feat: cloud and ee (#805)

* stripe init git submodules for enterprise modules * * Cloud billing UI - WIP * Proxy websockets in dev mode * Separate workspace login and creation for cloud * Other fixes * feat: billing (cloud) * * add domain service * prepare links from workspace hostname * WIP * Add exchange token generation * Validate JWT token type during verification * domain service * add SkipTransform decorator * * updates (server) * add new packages * new sso migration file * WIP * Fix hostname generation * WIP * WIP * Reduce input error font-size * set max password length * jwt package * license page - WIP * * License management UI * Move license key store to db * add reflector * SSO enforcement * * Add default plan * Add usePlan hook * * Fix auth container margin in mobile * Redirect login and home to select page in cloud * update .gitignore * Default to yearly * * Trial messaging * Handle ended trials * Don't set to readonly on collab disconnect (Cloud) * Refine trial (UI) * Fix bug caused by using jotai optics atom in AppHeader component * configurable database maximum pool * Close SSO form on save * wip * sync * Only show sign-in in cloud * exclude base api part from workspaceId check * close db connection beforeApplicationShutdown * Add health/live endpoint * clear cookie on hostname change * reset currentUser atom * Change text * return 401 if workspace does not match * feat: show user workspace list in cloud login page * sync * Add home path * Prefetch to speed up queries * * Add robots.txt * Disallow login and forgot password routes * wildcard user-agent * Fix space query cache * fix * fix * use space uuid for recent pages * prefetch billing plans * enhance license page * sync
2025-03-06 13:38:37 +00:00
parent 91596be70e
commit b81c9ee10c
148 changed files with 8947 additions and 3458 deletions
@@ -0,0 +1,115 @@
+import {
+  Button,
+  Card,
+  List,
+  SegmentedControl,
+  ThemeIcon,
+  Title,
+  Text,
+  Group,
+} from "@mantine/core";
+import { useState } from "react";
+import { IconCheck } from "@tabler/icons-react";
+import { useBillingPlans } from "@/ee/billing/queries/billing-query.ts";
+import { getCheckoutLink } from "@/ee/billing/services/billing-service.ts";
+
+export default function BillingPlans() {
+  const { data: plans } = useBillingPlans();
+  const [interval, setInterval] = useState("yearly");
+
+  if (!plans) {
+    return null;
+  }
+
+  const handleCheckout = async (priceId: string) => {
+    try {
+      const checkoutLink = await getCheckoutLink({
+        priceId: priceId,
+      });
+      window.location.href = checkoutLink.url;
+    } catch (err) {
+      console.error("Failed to get checkout link", err);
+    }
+  };
+
+  return (
+    <Group justify="center" p="xl">
+      {plans.map((plan) => {
+        const price =
+          interval === "monthly" ? plan.price.monthly : plan.price.yearly;
+        const priceId = interval === "monthly" ? plan.monthlyId : plan.yearlyId;
+        const yearlyMonthPrice = parseInt(plan.price.yearly) / 12;
+
+        return (
+          <Card
+            key={plan.name}
+            withBorder
+            radius="md"
+            shadow="sm"
+            p="xl"
+            w={300}
+          >
+            <SegmentedControl
+              value={interval}
+              onChange={setInterval}
+              fullWidth
+              data={[
+                { label: "Monthly", value: "monthly" },
+                { label: "Yearly (25% OFF)", value: "yearly" },
+              ]}
+            />
+
+            <Title order={3} ta="center" mt="sm" mb="xs">
+              {plan.name}
+            </Title>
+            <Text ta="center" size="lg" fw={700}>
+              {interval === "monthly" && (
+                <>
+                  ${price}{" "}
+                  <Text span size="sm" fw={500} c="dimmed">
+                    /user/month
+                  </Text>
+                </>
+              )}
+              {interval === "yearly" && (
+                <>
+                  ${yearlyMonthPrice}{" "}
+                  <Text span size="sm" fw={500} c="dimmed">
+                    /user/month
+                  </Text>
+                </>
+              )}
+              <br/>
+              <Text span ta="center" size="md" fw={500} c="dimmed">
+                billed {interval}
+              </Text>
+            </Text>
+
+            <Card.Section mt="lg">
+              <Button onClick={() => handleCheckout(priceId)} fullWidth>
+                Subscribe
+              </Button>
+            </Card.Section>
+
+            <Card.Section mt="md">
+              <List
+                spacing="xs"
+                size="sm"
+                center
+                icon={
+                  <ThemeIcon variant="light" size={24} radius="xl">
+                    <IconCheck size={16} />
+                  </ThemeIcon>
+                }
+              >
+                {plan.features.map((feature, index) => (
+                  <List.Item key={index}>{feature}</List.Item>
+                ))}
+              </List>
+            </Card.Section>
+          </Card>
+        );
+      })}
+    </Group>
+  );
+}