Remove branding option

apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/edit/page.tsx

@@ -82,8 +82,10 @@ export default async function EditPage({
             {page && isProPlan ? (
               <CustomDomainForm
                 defaultValues={{
-                  customDomain: page?.customDomain,
-                  id: page?.id,
+                  ...page,
+                  monitors: page.monitorsToPages.map(
+                    ({ monitor }) => monitor.id,
+                  ),
                 }} // to be improved
               />
             ) : (

apps/web/src/app/status-page/[domain]/layout.tsx

@@ -1,11 +1,21 @@
+import { notFound } from "next/navigation";
+
 import { Shell } from "@/components/dashboard/shell";
+import { api } from "@/trpc/server";
 import NavigationLink from "./_components/navigation-link";
 
-export default function StatusPageLayout({
-  children,
-}: {
+type Props = {
+  params: { domain: string };
   children: React.ReactNode;
-}) {
+};
+
+export default async function StatusPageLayout({ params, children }: Props) {
+  if (!params.domain) return notFound();
+  const page = await api.page.getPageBySlug.query({ slug: params.domain });
+  if (!page) {
+    return notFound();
+  }
+
   return (
     <div className="flex min-h-screen w-full flex-col space-y-6 p-4 md:p-8">
       <header className="mx-auto w-full max-w-xl">
@@ -19,19 +29,21 @@ export default function StatusPageLayout({
           {children}
         </Shell>
       </main>
-      <footer className="z-10">
-        <p className="text-muted-foreground text-center text-sm">
-          powered by{" "}
-          <a
-            href="https://www.openstatus.dev"
-            target="_blank"
-            rel="noreferrer"
-            className="text-foreground underline underline-offset-4 hover:no-underline"
-          >
-            openstatus.dev
-          </a>
-        </p>
-      </footer>
+      {!page.removeBranding && (
+        <footer className="z-10">
+          <p className="text-muted-foreground text-center text-sm">
+            powered by{" "}
+            <a
+              href="https://www.openstatus.dev"
+              target="_blank"
+              rel="noreferrer"
+              className="text-foreground underline underline-offset-4 hover:no-underline"
+            >
+              openstatus.dev
+            </a>
+          </p>
+        </footer>
+      )}
     </div>
   );
 }

apps/web/src/components/forms/custom-domain-form.tsx

@@ -9,6 +9,7 @@ import type * as z from "zod";
 import { insertPageSchemaWithMonitors } from "@openstatus/db/src/schema";
 
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Form,
   FormControl,
@@ -26,17 +27,23 @@ import DomainStatusIcon from "../domains/domain-status-icon";
 import { LoadingAnimation } from "../loading-animation";
 import { InputWithAddons } from "../ui/input-with-addons";
 
-const customDomain = insertPageSchemaWithMonitors.pick({
-  customDomain: true,
-  id: true,
-});
-
-type Schema = z.infer<typeof customDomain>;
+type Schema = z.infer<typeof insertPageSchemaWithMonitors>;
 
 export function CustomDomainForm({ defaultValues }: { defaultValues: Schema }) {
   const form = useForm<Schema>({
-    resolver: zodResolver(customDomain),
-    defaultValues,
+    resolver: zodResolver(insertPageSchemaWithMonitors),
+    defaultValues: {
+      id: defaultValues?.id || 0,
+      workspaceId: defaultValues?.workspaceId || 0,
+      title: defaultValues?.title || "",
+      description: defaultValues?.description || "",
+      icon: defaultValues?.icon || "",
+      slug: defaultValues?.slug || "",
+      customDomain: defaultValues?.customDomain || "",
+      removeBranding: defaultValues?.removeBranding || false,
+      monitors: defaultValues?.monitors ?? [],
+      workspaceSlug: "",
+    },
   });
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
@@ -45,8 +52,14 @@ export function CustomDomainForm({ defaultValues }: { defaultValues: Schema }) {
   const { status } = domainStatus || {};
 
   async function onSubmit(data: Schema) {
+    const shouldUpdateBranding =
+      Boolean(defaultValues?.removeBranding) !== data.removeBranding;
+
     startTransition(async () => {
       try {
+        if (shouldUpdateBranding) {
+          await api.page.updatePage.mutate(data);
+        }
         if (defaultValues.id) {
           await api.page.addCustomDomain.mutate({
             customDomain: data.customDomain,
@@ -114,6 +127,24 @@ export function CustomDomainForm({ defaultValues }: { defaultValues: Schema }) {
             </FormItem>
           )}
         />
+        <FormField
+          control={form.control}
+          name="removeBranding"
+          render={({ field }) => (
+            <FormItem className="flex gap-2 space-y-0 sm:col-span-4">
+              <FormControl>
+                <Checkbox
+                  checked={Boolean(field.value)}
+                  onCheckedChange={(value) => field.onChange(Boolean(value))}
+                />
+              </FormControl>
+
+              <div className="space-y-1 leading-none">
+                <FormLabel className="font-normal">Remove branding</FormLabel>
+              </div>
+            </FormItem>
+          )}
+        />
         <div className="sm:col-span-full">
           <Button className="w-full sm:w-auto">
             {!isPending ? "Confirm" : <LoadingAnimation />}

apps/web/src/config/plans.ts

@@ -41,7 +41,7 @@ export const plansConfig: Record<Plans, PlanProps> = {
     features: [
       "20 monitors",
       "5 status page",
-      "custom domain",
+      "custom domain & remove branding",
       "1m, 5m, 10m, 30m, 1h checks",
       "5 team members",
     ],

packages/api/src/router/page.ts

@@ -124,6 +124,23 @@ export const pageRouter = createTRPCRouter({
         .all();
       const workspaceIds = result.map((workspace) => workspace.workspaceId);
 
+      const currentWorkspace = await opts.ctx.db
+        .select()
+        .from(workspace)
+        .where(eq(workspace.id, opts.input.workspaceId))
+        .get();
+      if (!currentWorkspace) return;
+
+      if (
+        currentWorkspace.plan === "free" &&
+        opts.input.removeBranding === true
+      ) {
+        throw new TRPCError({
+          code: "FORBIDDEN",
+          message: "You can't remove branding with the free plan.",
+        });
+      }
+
       const pageToUpdate = await opts.ctx.db
         .select()
         .from(page)

packages/db/drizzle/0008_fine_toxin.sql

@@ -0,0 +1 @@
+ALTER TABLE page ADD `remove_branding` integer DEFAULT false;