chore: enable self-hosted payment option

Author: svedova

src/pages/user/account/_components/SubscriptionDetails.tsx

@@ -47,7 +47,9 @@ export default function SubscriptionDetails({ user }: Props) {
         subtitle={[
           user.package.name,
           user.package.id.startsWith("self-hosted")
-            ? `${capitalize(user.package.edition)} - ${license?.seats} Seats`
+            ? `${capitalize(user.package.edition)} - ${
+                license?.seats || "unlimited"
+              } seats`
             : "",
         ]
           .filter(i => i)

src/pages/user/account/_components/SubscriptionDetailsCheckout.spec.tsx

@@ -0,0 +1,44 @@
+import type { RenderResult } from "@testing-library/react";
+import { render, fireEvent } from "@testing-library/react";
+import SubscriptionDetailsCheckout from "./SubscriptionDetailsCheckout";
+import mockUser from "~/testing/data/mock_user";
+
+interface Props {
+  user: User;
+}
+
+describe("~/pages/user/account/_components/SubscriptionDetailsCheckout", () => {
+  let wrapper: RenderResult;
+
+  const createWrapper = ({ user }: Props) => {
+    wrapper = render(<SubscriptionDetailsCheckout user={user} />);
+  };
+
+  beforeEach(() => {
+    createWrapper({ user: mockUser() });
+  });
+
+  test("should display two options", () => {
+    expect(wrapper.getByText("Self-Hosted Edition")).toBeTruthy();
+    expect(wrapper.getByText("Cloud Edition")).toBeTruthy();
+  });
+
+  test("should have 'Limited Edition' pre-selected", () => {
+    expect(wrapper.getByText("Limited Edition")).toBeTruthy();
+  });
+
+  test("should 'Up to 100 deployments per month' pre-selected", () => {
+    expect(wrapper.getByText("Up to 100 deployments per month")).toBeTruthy();
+  });
+
+  test("should have two self hosted editions", () => {
+    fireEvent.mouseDown(wrapper.getAllByRole("combobox").at(0)!);
+    expect(wrapper.getByText("Premium Edition")).toBeTruthy();
+  });
+
+  test("should have three cloud editions", () => {
+    fireEvent.mouseDown(wrapper.getAllByRole("combobox").at(1)!);
+    expect(wrapper.getByText("Up to 500 deployments per month")).toBeTruthy();
+    expect(wrapper.getByText("Up to 1000 deployments per month")).toBeTruthy();
+  });
+});

src/pages/user/account/_components/SubscriptionDetailsCheckout.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import Box from "@mui/material/Box";
-import Chip from "@mui/material/Chip";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import { grey } from "@mui/material/colors";
@@ -70,16 +69,8 @@ export default function Checkout({ user }: Props) {
           <CardHeader
             title="Self-Hosted Edition"
             subtitle={`Host Stormkit on your own servers, ensuring complete control and security of your data. Perfect for teams requiring flexibility, scalability, and compliance with internal policies.`}
-            sx={{
-              opacity: 0.25,
-            }}
           />
-          <Chip
-            label="Soon 🎉"
-            color="success"
-            sx={{ position: "absolute", top: -10, right: -10, zIndex: 5 }}
-          />
-          <Box sx={{ opacity: 0.25 }}>
+          <Box>
             <Box sx={{ mb: 4, flex: 1 }}>
               <Box sx={{ display: "flex", mb: 2 }}>
                 {edition === "limited" ? (
@@ -104,7 +95,6 @@ export default function Checkout({ user }: Props) {
                 variant="outlined"
                 selected={[edition]}
                 sx={{ color: "white" }}
-                disabled={true}
                 items={[
                   { text: "Limited Edition", value: "limited" },
                   { text: "Premium Edition", value: "premium" },
@@ -126,14 +116,13 @@ export default function Checkout({ user }: Props) {
               </Box>
             </Box>
           </Box>
-          <CardFooter sx={{ textAlign: "center", opacity: 0.25 }}>
+          <CardFooter sx={{ textAlign: "center" }}>
             {edition === "limited" ? (
               <Button
                 variant="contained"
                 color="secondary"
                 sx={{ px: 6 }}
                 href={`${paymentLinks["self-hosted"]}?prefilled_email=${user?.email}`}
-                disabled
               >
                 Go to portal
               </Button>

src/pages/user/account/_components/WhatsIncluded.tsx

@@ -56,10 +56,10 @@ export const includedFeatures = (tier: SubscriptionName, edition?: Edition) => {
         included: true,
         text: tier === "self-hosted" ? "Up to 5 seats" : "Unlimited seats",
       },
-      {
-        included: edition === "premium",
-        text: "Analytics",
-      },
+      // {
+      //   included: edition === "premium",
+      //   text: "Analytics",
+      // },
       {
         included: edition === "premium",
         text: "Audit Logs",
@@ -68,10 +68,10 @@ export const includedFeatures = (tier: SubscriptionName, edition?: Edition) => {
       //   included: tier === "self-hosted-premium",
       //   text: "Prerendering",
       // },
-      {
-        included: edition === "premium",
-        text: "IP Limiting",
-      },
+      // {
+      //   included: edition === "premium",
+      //   text: "IP Limiting",
+      // },
       {
         included: edition === "premium",
         text: "Premium support",