From ff49603cb1e11cd1ad84bfacda4e792e0996e3ee Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Wed, 16 Aug 2023 20:56:18 +0200
Subject: [PATCH] feat: clean up (#186)

* feat: clean up

* chore: update footer

* fix: add missing docs
---
 .../(auth)/sign-in/[[...sign-in]]/page.tsx    |   1 +
 .../(auth)/sign-up/[[...sign-up]]/page.tsx    |   1 +
 .../(dashboard)/[workspaceSlug]/layout.tsx    |   3 +-
 .../[workspaceSlug]/monitors/loading.tsx      |  18 +++
 .../[workspaceSlug]/monitors/page.tsx         |  40 +++----
 .../_components/customer-portal-button.tsx    |  39 ++++++
 .../settings/_components/plan.tsx             | 111 +++---------------
 .../[workspaceSlug]/settings/loading.tsx      |  14 +++
 .../[workspaceSlug]/settings/page.tsx         |  13 +-
 .../src/components/dashboard/container.tsx    |   4 +-
 apps/web/src/components/layout/app-footer.tsx |  30 +++++
 apps/web/src/components/layout/footer.tsx     |  47 --------
 .../components/layout/marketing-footer.tsx    |  64 ++++++++++
 .../components/layout/marketing-layout.tsx    |   4 +-
 apps/web/src/components/marketing/plans.tsx   | 105 ++++++-----------
 apps/web/src/config/plans.ts                  |  63 ++++++++++
 16 files changed, 318 insertions(+), 239 deletions(-)
 create mode 100644 apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/loading.tsx
 create mode 100644 apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/customer-portal-button.tsx
 create mode 100644 apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/loading.tsx
 create mode 100644 apps/web/src/components/layout/app-footer.tsx
 delete mode 100644 apps/web/src/components/layout/footer.tsx
 create mode 100644 apps/web/src/components/layout/marketing-footer.tsx
 create mode 100644 apps/web/src/config/plans.ts

diff --git a/apps/web/src/app/app/(auth)/sign-in/[[...sign-in]]/page.tsx b/apps/web/src/app/app/(auth)/sign-in/[[...sign-in]]/page.tsx
index 53d95220..3a48f679 100644
--- a/apps/web/src/app/app/(auth)/sign-in/[[...sign-in]]/page.tsx
+++ b/apps/web/src/app/app/(auth)/sign-in/[[...sign-in]]/page.tsx
@@ -4,6 +4,7 @@ import { auth, SignIn } from "@clerk/nextjs";
 export default function Page() {
   const { userId } = auth();
 
+  // TODO: we can improve the UX here. If user is logged in, (s)he will see the screen for a quick moment
   if (userId) {
     redirect("/app");
   }
diff --git a/apps/web/src/app/app/(auth)/sign-up/[[...sign-up]]/page.tsx b/apps/web/src/app/app/(auth)/sign-up/[[...sign-up]]/page.tsx
index 4366ebcc..d47b3a72 100644
--- a/apps/web/src/app/app/(auth)/sign-up/[[...sign-up]]/page.tsx
+++ b/apps/web/src/app/app/(auth)/sign-up/[[...sign-up]]/page.tsx
@@ -4,6 +4,7 @@ import { auth, SignUp } from "@clerk/nextjs";
 export default function Page() {
   const { userId } = auth();
 
+  // TODO: we can improve the UX here. If user is logged in, (s)he will see the screen for a quick moment
   if (userId) {
     redirect("/app");
   }
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/layout.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/layout.tsx
index aecab5fc..80419c7d 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/layout.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/layout.tsx
@@ -4,8 +4,8 @@ import { Shell } from "@/components/dashboard/shell";
 import { AppHeader } from "@/components/layout/app-header";
 import { AppMenu } from "@/components/layout/app-menu";
 import { AppSidebar } from "@/components/layout/app-sidebar";
-import { Footer } from "@/components/layout/footer";
 
+// TODO: make the container min-h-screen and the footer below!
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="container relative mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-6 p-4 lg:p-8">
@@ -24,7 +24,6 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
           </Shell>
         </main>
       </div>
-      <Footer />
     </div>
   );
 }
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/loading.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/loading.tsx
new file mode 100644
index 00000000..42b10788
--- /dev/null
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/loading.tsx
@@ -0,0 +1,18 @@
+import { Container } from "@/components/dashboard/container";
+import { Header } from "@/components/dashboard/header";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
+      <div className="col-span-full flex w-full justify-between">
+        <Header.Skeleton>
+          <Skeleton className="h-9 w-20" />
+        </Header.Skeleton>
+      </div>
+      <Container.Skeleton />
+      <Container.Skeleton />
+      <Container.Skeleton />
+    </div>
+  );
+}
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/page.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/page.tsx
index 62f6de92..510d3e62 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/page.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/page.tsx
@@ -42,28 +42,28 @@ export default async function MonitorPage({
             key={index}
             title={monitor.name}
             description={monitor.description}
-            actions={
-              <ActionButton {...monitor} workspaceSlug={params.workspaceSlug} />
-            }
+            actions={[
+              <Badge
+                key="status-badge"
+                variant={monitor.active ? "default" : "outline"}
+                className="capitalize"
+              >
+                {monitor.active ? "active" : "inactive"}
+                <span
+                  className={cn(
+                    "ml-1 h-1.5 w-1.5 rounded-full",
+                    monitor.active ? "bg-green-500" : "bg-red-500",
+                  )}
+                />
+              </Badge>,
+              <ActionButton
+                key="action-button"
+                {...monitor}
+                workspaceSlug={params.workspaceSlug}
+              />,
+            ]}
           >
             <dl className="[&_dt]:text-muted-foreground grid gap-2 [&>*]:text-sm [&_dt]:font-light">
-              <div className="flex min-w-0 items-center justify-between gap-3">
-                <dt>Status</dt>
-                <dd>
-                  <Badge
-                    variant={monitor.active ? "default" : "outline"}
-                    className="capitalize"
-                  >
-                    {monitor.active ? "active" : "inactive"}
-                    <span
-                      className={cn(
-                        "ml-1 h-1.5 w-1.5 rounded-full",
-                        monitor.active ? "bg-green-500" : "bg-red-500",
-                      )}
-                    />
-                  </Badge>
-                </dd>
-              </div>
               <div className="flex min-w-0 items-center justify-between gap-3">
                 <dt>Frequency</dt>
                 <dd className="font-mono">{monitor.periodicity}</dd>
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/customer-portal-button.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/customer-portal-button.tsx
new file mode 100644
index 00000000..18526de4
--- /dev/null
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/customer-portal-button.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { useTransition } from "react";
+import { useRouter } from "next/navigation";
+
+import { LoadingAnimation } from "@/components/loading-animation";
+import { Button } from "@/components/ui/button";
+import { api } from "@/trpc/client";
+
+interface Props {
+  workspaceSlug: string;
+}
+
+export function CustomerPortalButton({ workspaceSlug }: Props) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const getUserCustomerPortal = () => {
+    startTransition(async () => {
+      const url = await api.stripeRouter.getUserCustomerPortal.mutate({
+        workspaceSlug,
+      });
+      if (!url) return;
+      router.push(url);
+      return;
+    });
+  };
+
+  return (
+    <Button
+      size="sm"
+      variant="outline"
+      onClick={getUserCustomerPortal}
+      disabled={isPending}
+    >
+      {isPending ? <LoadingAnimation /> : "Customer Portal"}
+    </Button>
+  );
+}
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/plan.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/plan.tsx
index d945c6ec..75de11fb 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/plan.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/plan.tsx
@@ -2,32 +2,17 @@
 
 import { useTransition } from "react";
 import { useRouter } from "next/navigation";
-import { Check } from "lucide-react";
 import type { z } from "zod";
 
 import type { selectWorkspaceSchema } from "@openstatus/db/src/schema/workspace";
 
 import { Shell } from "@/components/dashboard/shell";
-import { Button } from "@/components/ui/button";
+import { Plan } from "@/components/marketing/plans";
+import type { PlanProps } from "@/config/plans";
+import { plansConfig } from "@/config/plans";
 import { getStripe } from "@/lib/stripe/client";
-import { cn } from "@/lib/utils";
 import { api } from "@/trpc/client";
 
-interface Plan {
-  title: string;
-  description: string;
-  cost: number | string;
-  features: string[];
-  action: {
-    text: string;
-    onClick: () => void;
-  };
-  loading?: boolean;
-}
-
-interface Props extends Plan {
-  className?: string;
-}
 export const SettingsPlan = ({
   workspaceSlug,
   workspaceData,
@@ -36,13 +21,13 @@ export const SettingsPlan = ({
   workspaceData: z.infer<typeof selectWorkspaceSchema>;
 }) => {
   const router = useRouter();
-
   const [isPending, startTransition] = useTransition();
+  const [isPortalPending, startPortalTransition] = useTransition();
 
   const getCheckoutSession = () => {
     startTransition(async () => {
       const result = await api.stripeRouter.getCheckoutSession.mutate({
-        workspaceSlug: workspaceSlug,
+        workspaceSlug,
       });
       if (!result) return;
 
@@ -50,26 +35,22 @@ export const SettingsPlan = ({
       stripe?.redirectToCheckout({ sessionId: result.id });
     });
   };
-  const getUserCustomerPortal = async () => {
-    const url = await api.stripeRouter.getUserCustomerPortal.mutate({
-      workspaceSlug: workspaceSlug,
+
+  const getUserCustomerPortal = () => {
+    startPortalTransition(async () => {
+      const url = await api.stripeRouter.getUserCustomerPortal.mutate({
+        workspaceSlug,
+      });
+      if (!url) return;
+      router.push(url);
+      return;
     });
-    if (!url) return;
-    router.push(url);
-    return;
   };
-  getUserCustomerPortal;
-  const plans: Record<"free" | "pro", Plan> = {
+
+  const plans: Record<"free" | "pro", PlanProps> = {
     free: {
-      title: "Free",
-      description: "Get started now and upgrade once reaching the limits.",
-      cost: 0,
-      features: [
-        "5 monitors",
-        "1 status page",
-        "subdomain",
-        "10m, 30m, 1h checks",
-      ],
+      ...plansConfig.free,
+      loading: isPortalPending,
       action: {
         text: workspaceData?.plan === "free" ? "Current plan" : "Downgrade",
         onClick: async () => {
@@ -78,16 +59,7 @@ export const SettingsPlan = ({
       },
     },
     pro: {
-      title: "Pro",
-      description: "Scale and build monitors for all your services.",
-      cost: 29,
-      features: [
-        "20 monitors",
-        "5 status page",
-        "custom domain",
-        "1m, 5m, 10m, 30m, 1h checks",
-        "5 team members",
-      ],
+      ...plansConfig.pro,
       loading: isPending,
       action: {
         text: workspaceData?.plan === "free" ? "Upgrade" : "Current plan",
@@ -110,48 +82,3 @@ export const SettingsPlan = ({
     </Shell>
   );
 };
-
-export function Plan({
-  title,
-  description,
-  cost,
-  features,
-  action,
-  loading,
-  className,
-}: Props) {
-  return (
-    <div key={title} className={cn("flex w-full flex-col", className)}>
-      <div className="flex-1">
-        <div className="flex items-end justify-between gap-4">
-          <div>
-            <p className="font-cal mb-2 text-xl">{title}</p>
-            <p className="text-muted-foreground">{description}</p>
-          </div>
-          <p className="shrink-0">
-            <span className="font-cal text-2xl">{cost}</span>
-            {typeof cost === "number" ? (
-              <span className="text-muted-foreground font-light">/month</span>
-            ) : null}
-          </p>
-        </div>
-        <ul className="border-border/50 grid divide-y py-2">
-          {features.map((item) => (
-            <li
-              key={item}
-              className="text-muted-foreground inline-flex items-center py-2 text-sm"
-            >
-              <Check className="mr-2 h-4 w-4 text-green-500" />
-              {item}
-            </li>
-          ))}
-        </ul>
-      </div>
-      <div>
-        <Button size="sm" onClick={action.onClick} disabled={loading}>
-          {action.text}
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/loading.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/loading.tsx
new file mode 100644
index 00000000..dfd67ade
--- /dev/null
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/loading.tsx
@@ -0,0 +1,14 @@
+import { Header } from "@/components/dashboard/header";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="grid gap-6 md:grid-cols-1 md:gap-8">
+      <div className="col-span-full flex w-full justify-between">
+        <Header.Skeleton />
+      </div>
+      <Skeleton className="h-4 w-24" />
+      <Skeleton className="h-72 w-full" />
+    </div>
+  );
+}
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/page.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/page.tsx
index 68e6cc45..c083eb0a 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/page.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/page.tsx
@@ -3,6 +3,7 @@ import * as React from "react";
 import { Header } from "@/components/dashboard/header";
 import { Badge } from "@/components/ui/badge";
 import { api } from "@/trpc/server";
+import { CustomerPortalButton } from "./_components/customer-portal-button";
 import { SettingsPlan } from "./_components/plan";
 
 export default async function Page({
@@ -22,14 +23,18 @@ export default async function Page({
       <Header
         title="Settings"
         description="Your OpenStatus workspace settings."
-      ></Header>
-      <div className="col-span-full">
+      />
+      <div className="col-span-full grid gap-4">
         <h3 className="text-lg font-medium">Plans</h3>
-
-        <div className="mt-4 flex items-center space-x-2 text-sm">
+        <div className="text-muted-foreground flex items-center space-x-2 text-sm">
           Your current plan is{" "}
           <Badge className="ml-2">{data?.plan || "free"}</Badge>
         </div>
+        {data?.plan === "pro" ? (
+          <div>
+            <CustomerPortalButton workspaceSlug={params.workspaceSlug} />
+          </div>
+        ) : null}
         <SettingsPlan
           workspaceSlug={params.workspaceSlug}
           workspaceData={data}
diff --git a/apps/web/src/components/dashboard/container.tsx b/apps/web/src/components/dashboard/container.tsx
index 9438cfdf..c3b4d8fc 100644
--- a/apps/web/src/components/dashboard/container.tsx
+++ b/apps/web/src/components/dashboard/container.tsx
@@ -36,7 +36,9 @@ function Container({
             <CardDescription>{description}</CardDescription>
           ) : null}
         </div>
-        {actions ? <div className="flex gap-2">{actions}</div> : null}
+        {actions ? (
+          <div className="flex items-center gap-2">{actions}</div>
+        ) : null}
       </CardHeader>
       {/* potentially `asChild` */}
       <CardContent>{children}</CardContent>
diff --git a/apps/web/src/components/layout/app-footer.tsx b/apps/web/src/components/layout/app-footer.tsx
new file mode 100644
index 00000000..7b3d13bf
--- /dev/null
+++ b/apps/web/src/components/layout/app-footer.tsx
@@ -0,0 +1,30 @@
+import Link from "next/link";
+
+import { Shell } from "../dashboard/shell";
+
+export function AppFooter() {
+  return (
+    <footer className="w-full">
+      <Shell className="flex items-center justify-between">
+        <div className="text-muted-foreground text-xs font-light">
+          All rights reserved &copy;
+        </div>
+        <div className="text-right text-xs">
+          <Link
+            href="/legal/terms"
+            className="text-foreground underline underline-offset-4 hover:no-underline"
+          >
+            Terms
+          </Link>
+          <span className="text-muted-foreground/70 mx-1">&bull;</span>
+          <Link
+            href="/legal/privacy"
+            className="text-foreground underline underline-offset-4 hover:no-underline"
+          >
+            Privacy
+          </Link>
+        </div>
+      </Shell>
+    </footer>
+  );
+}
diff --git a/apps/web/src/components/layout/footer.tsx b/apps/web/src/components/layout/footer.tsx
deleted file mode 100644
index df32bb65..00000000
--- a/apps/web/src/components/layout/footer.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import Link from "next/link";
-
-export function Footer() {
-  return (
-    <footer className="text-muted-foreground mx-auto grid gap-4 text-sm">
-      <p className="border-border rounded-full border px-4 py-2 text-center backdrop-blur-[2px]">
-        A collaboration between{" "}
-        <a
-          href="https://twitter.com/mxkaske"
-          target="_blank"
-          rel="noreferrer"
-          className="text-foreground underline underline-offset-4 hover:no-underline"
-        >
-          @mxkaske
-        </a>{" "}
-        and{" "}
-        <a
-          href="https://twitter.com/thibaultleouay"
-          target="_blank"
-          rel="noreferrer"
-          className="text-foreground underline underline-offset-4 hover:no-underline"
-        >
-          @thibaultleouay
-        </a>
-        <span className="text-muted-foreground/70 mx-1">&bull;</span>
-        See on{" "}
-        <a
-          href="https://github.com/openstatushq/openstatus"
-          target="_blank"
-          rel="noreferrer"
-          className="text-foreground underline underline-offset-4 hover:no-underline"
-        >
-          GitHub
-        </a>
-      </p>
-      <div className="flex items-center justify-center space-x-2">
-        <Link href="/legal/terms" className="text-xs">
-          Terms
-        </Link>{" "}
-        <span>{"/"}</span>
-        <Link href="/legal/privacy" className="text-xs">
-          Privacy
-        </Link>
-      </div>
-    </footer>
-  );
-}
diff --git a/apps/web/src/components/layout/marketing-footer.tsx b/apps/web/src/components/layout/marketing-footer.tsx
new file mode 100644
index 00000000..93d6805d
--- /dev/null
+++ b/apps/web/src/components/layout/marketing-footer.tsx
@@ -0,0 +1,64 @@
+import Link from "next/link";
+import { ArrowUpRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Shell } from "../dashboard/shell";
+
+interface Props {
+  className?: string;
+}
+
+export function MarketingFooter({ className }: Props) {
+  return (
+    <footer className={cn("w-full", className)}>
+      <Shell className="grid grid-cols-2 gap-6 md:grid-cols-3">
+        <div className="flex flex-col gap-3 text-sm">
+          <p className="text-muted-foreground font-semibold">Twitter</p>
+          <FooterLink
+            href="https://twitter.com/thibaultleouay"
+            label="@thibaultleouay"
+          />
+          <FooterLink href="https://twitter.com/mxkaske" label="@mxkaske" />
+        </div>
+        <div className="flex flex-col gap-3 text-sm">
+          <p className="text-muted-foreground font-semibold">Community</p>
+          <FooterLink
+            href="https://github.com/openstatushq/openstatus"
+            label="GitHub"
+          />
+          <FooterLink href="https://discord.gg/dHD4JtSfsn" label="Discord" />
+        </div>
+        <div className="flex flex-col gap-3 text-sm">
+          <p className="text-muted-foreground font-semibold">More</p>
+          <FooterLink href="https://docs.openstatus.dev" label="Docs" />
+          <FooterLink href="/legal/terms" label="Terms" />
+          <FooterLink href="/legal/privacy" label="Privacy" />
+        </div>
+      </Shell>
+    </footer>
+  );
+}
+
+function FooterLink({ href, label }: Record<"href" | "label", string>) {
+  const isExternal = href.startsWith("http");
+
+  const LinkSlot = isExternal ? "a" : Link;
+
+  const externalProps = isExternal
+    ? {
+        target: "_blank",
+        rel: "noreferrer",
+      }
+    : {};
+
+  return (
+    <LinkSlot
+      className="text-foreground inline-flex items-center underline underline-offset-4 hover:no-underline"
+      href={href}
+      {...{ externalProps }}
+    >
+      {label}
+      {isExternal ? <ArrowUpRight className="ml-1 h-4 w-4" /> : null}
+    </LinkSlot>
+  );
+}
diff --git a/apps/web/src/components/layout/marketing-layout.tsx b/apps/web/src/components/layout/marketing-layout.tsx
index cadd0d15..85d97f33 100644
--- a/apps/web/src/components/layout/marketing-layout.tsx
+++ b/apps/web/src/components/layout/marketing-layout.tsx
@@ -1,4 +1,4 @@
-import { Footer } from "./footer";
+import { MarketingFooter } from "./marketing-footer";
 import { MarketingHeader } from "./marketing-header";
 
 export function MarketingLayout({ children }: { children: React.ReactNode }) {
@@ -8,7 +8,7 @@ export function MarketingLayout({ children }: { children: React.ReactNode }) {
       <div className="mx-auto flex w-full max-w-[calc(65ch+8rem)] flex-1 flex-col items-start justify-center">
         {children}
       </div>
-      <Footer />
+      <MarketingFooter className="mx-auto w-full max-w-[calc(65ch+8rem)]" />
     </main>
   );
 }
diff --git a/apps/web/src/components/marketing/plans.tsx b/apps/web/src/components/marketing/plans.tsx
index 7a1000e4..93a9bf24 100644
--- a/apps/web/src/components/marketing/plans.tsx
+++ b/apps/web/src/components/marketing/plans.tsx
@@ -1,77 +1,24 @@
 import Link from "next/link";
 import { Check } from "lucide-react";
 
+import type { PlanProps } from "@/config/plans";
+import { plansConfig } from "@/config/plans";
 import { cn } from "@/lib/utils";
 import { Shell } from "../dashboard/shell";
+import { LoadingAnimation } from "../loading-animation";
 import { Button } from "../ui/button";
 
-interface Plan {
-  title: string;
-  description: string;
-  cost: number | string;
-  features: string[];
-  action?: {
-    text: string;
-    link: string;
-  };
-  disabled?: boolean;
-}
-
-const plans: Record<"hobby" | "pro" | "enterprise", Plan> = {
-  hobby: {
-    title: "Hobby",
-    description: "Get started now and upgrade once reaching the limits.",
-    cost: 0,
-    features: [
-      "5 monitors",
-      "1 status page",
-      "subdomain",
-      "10m, 30m, 1h checks",
-    ],
-    action: {
-      text: "Start Now",
-      link: "/app/sign-up?plan=hobby",
-    },
-  },
-  pro: {
-    title: "Pro",
-    description: "Scale and build monitors for all your services.",
-    cost: 29,
-    features: [
-      "20 monitors",
-      "5 status page",
-      "custom domain",
-      "1m, 5m, 10m, 30m, 1h checks",
-      "5 team members",
-    ],
-    action: {
-      text: "Start Now",
-      link: "/app/sign-up?plan=pro",
-    },
-  },
-  enterprise: {
-    title: "Enterprise",
-    description: "Dedicated support and needs for your company.",
-    cost: "Lets talk",
-    features: [],
-    action: {
-      text: "Schedule call",
-      link: "https://cal.com/thibault-openstatus/30min",
-    },
-  },
-};
-
 export function Plans() {
   return (
     <Shell>
       <div className="grid gap-4 md:grid-cols-2 md:gap-0">
         <Plan
-          {...plans.hobby}
+          {...plansConfig.free}
           className="md:border-border/50 md:border-r md:pr-4"
         />
-        <Plan {...plans.pro} className="md:pl-4" />
+        <Plan {...plansConfig.pro} className="md:pl-4" />
         <Plan
-          {...plans.enterprise}
+          {...plansConfig.enterprise}
           className="md:border-border/50 col-span-full md:mt-4 md:border-t md:pt-4"
         />
       </div>
@@ -79,11 +26,11 @@ export function Plans() {
   );
 }
 
-interface Props extends Plan {
+interface Props extends PlanProps {
   className?: string;
 }
 
-function Plan({
+export function Plan({
   title,
   description,
   cost,
@@ -91,6 +38,7 @@ function Plan({
   action,
   disabled,
   className,
+  loading,
 }: Props) {
   return (
     <div
@@ -108,10 +56,14 @@ function Plan({
             <p className="text-muted-foreground">{description}</p>
           </div>
           <p className="shrink-0">
-            <span className="font-cal text-2xl">{cost}</span>
             {typeof cost === "number" ? (
-              <span className="text-muted-foreground font-light">/month</span>
-            ) : null}
+              <>
+                <span className="font-cal text-2xl">{cost} €</span>
+                <span className="text-muted-foreground font-light">/month</span>
+              </>
+            ) : (
+              <span className="font-cal text-2xl">{cost}</span>
+            )}
           </p>
         </div>
         <ul className="border-border/50 grid divide-y py-2">
@@ -126,13 +78,24 @@ function Plan({
           ))}
         </ul>
       </div>
-      <div>
-        {action ? (
-          <Button asChild size="sm">
-            <Link href={action.link}>{action.text}</Link>
-          </Button>
-        ) : null}
-      </div>
+      {action ? (
+        <div>
+          {"link" in action ? (
+            <Button asChild size="sm">
+              <Link href={action.link}>{action.text}</Link>
+            </Button>
+          ) : null}
+          {"onClick" in action ? (
+            <Button
+              onClick={action.onClick}
+              size="sm"
+              disabled={disabled || loading}
+            >
+              {loading ? <LoadingAnimation /> : action.text}
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/apps/web/src/config/plans.ts b/apps/web/src/config/plans.ts
new file mode 100644
index 00000000..9b8f5167
--- /dev/null
+++ b/apps/web/src/config/plans.ts
@@ -0,0 +1,63 @@
+export type Plans = "free" | "pro" | "enterprise";
+
+export interface PlanProps {
+  title: string;
+  description: string;
+  cost: number | string;
+  features: string[];
+  action?:
+    | {
+        text: string;
+        link: string;
+      }
+    | {
+        text: string;
+        onClick: () => void;
+      };
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+export const plansConfig: Record<Plans, PlanProps> = {
+  free: {
+    title: "Hobby",
+    description: "Get started now and upgrade once reaching the limits.",
+    cost: 0,
+    features: [
+      "5 monitors",
+      "1 status page",
+      "subdomain",
+      "10m, 30m, 1h checks",
+    ],
+    action: {
+      text: "Start Now",
+      link: "/app/sign-up?plan=hobby",
+    },
+  },
+  pro: {
+    title: "Pro",
+    description: "Scale and build monitors for all your services.",
+    cost: 29,
+    features: [
+      "20 monitors",
+      "5 status page",
+      "custom domain",
+      "1m, 5m, 10m, 30m, 1h checks",
+      "5 team members",
+    ],
+    action: {
+      text: "Start Now",
+      link: "/app/sign-up?plan=pro",
+    },
+  },
+  enterprise: {
+    title: "Enterprise",
+    description: "Dedicated support and needs for your company.",
+    cost: "Lets talk",
+    features: [],
+    action: {
+      text: "Schedule call",
+      link: "https://cal.com/thibault-openstatus/30min",
+    },
+  },
+};
-- 
2.51.2