+1 -1

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

reviewed

··· 35 35 monitors: page.monitorsToPages.map(({ monitor }) => monitor.id), 36 36 }} 37 37 defaultSection={search.success ? search.data.section : undefined} 38 38 - plan={workspace?.plan} 38 38 + plan={workspace.plan} 39 39 workspaceSlug={params.workspaceSlug} 40 40 /> 41 41 );

+5 -6

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

reviewed

··· 3 3 4 4 import { Button } from "@openstatus/ui"; 5 5 6 6 + import { getBaseUrl } from "@/app/status-page/[domain]/utils"; 6 7 import { Header } from "@/components/dashboard/header"; 7 8 import AppPageWithSidebarLayout from "@/components/layout/app-page-with-sidebar-layout"; 8 9 import { api } from "@/trpc/server"; ··· 33 34 <Button variant="outline" asChild> 34 35 <Link 35 36 target="_blank" 36 36 - href={ 37 37 - process.env.NODE_ENV === "development" 38 38 - ? `http://localhost:3000/status-page/${page.slug}` 39 39 - : // TODO: add custom domain support 40 40 - `https://${page.slug}.openstatus.dev` 41 41 - } 37 37 + href={getBaseUrl({ 38 38 + slug: page.slug, 39 39 + customDomain: page.customDomain, 40 40 + })} 42 41 > 43 42 Visit 44 43 </Link>

+2

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

reviewed

··· 10 10 }) { 11 11 const allMonitors = await api.monitor.getMonitorsByWorkspace.query(); 12 12 const isLimitReached = await api.page.isPageLimitReached.query(); 13 13 + const workspace = await api.workspace.getWorkspace.query(); 13 14 14 15 if (isLimitReached) return redirect("./"); 15 16 ··· 19 20 nextUrl="./" // back to the overview page 20 21 defaultSection="monitors" 21 22 workspaceSlug={params.workspaceSlug} 23 23 + plan={workspace.plan} 22 24 /> 23 25 ); 24 26 }

+16

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

reviewed

··· 12 12 export function createProtectedCookieKey(value: string) { 13 13 return `secured-${value}`; 14 14 } 15 15 + 16 16 + export function getBaseUrl({ 17 17 + slug, 18 18 + customDomain, 19 19 + }: { 20 20 + slug: string; 21 21 + customDomain?: string; 22 22 + }) { 23 23 + if (process.env.NODE_ENV === "development") { 24 24 + return `http://localhost:3000/status-page/${slug}`; 25 25 + } 26 26 + if (customDomain) { 27 27 + return `https://${customDomain}`; 28 28 + } 29 29 + return `https://${slug}.openstatus.dev`; 30 30 + }

+2 -2

apps/web/src/components/billing/pro-feature-hover-card.tsx

reviewed

··· 19 19 workspaceSlug, 20 20 }: { 21 21 children: React.ReactNode; 22 22 - plan?: WorkspacePlan; 22 22 + plan: WorkspacePlan; 23 23 minRequiredPlan: WorkspacePlan; 24 24 workspaceSlug: string; 25 25 }) { 26 26 console.log({ workspaceSlug, plan, minRequiredPlan }); 27 27 const [open, setOpen] = useState(false); 28 28 - const shouldUpgrade = upgradePlan(plan || "free", minRequiredPlan); 28 28 + const shouldUpgrade = upgradePlan(plan, minRequiredPlan); 29 29 30 30 if (!shouldUpgrade) return children; 31 31

+1 -1

apps/web/src/components/forms/status-page/form.tsx

reviewed

··· 43 43 * on submit, allows to push a url 44 44 */ 45 45 nextUrl?: string; 46 46 - plan?: WorkspacePlan; 46 46 + plan: WorkspacePlan; 47 47 workspaceSlug: string; 48 48 } 49 49

+8 -13

apps/web/src/components/forms/status-page/section-visibility.tsx

reviewed

··· 17 17 Input, 18 18 } from "@openstatus/ui"; 19 19 20 20 + import { getBaseUrl } from "@/app/status-page/[domain]/utils"; 20 21 import { ProFeatureHoverCard } from "@/components/billing/pro-feature-hover-card"; 21 22 import { CopyToClipboardButton } from "@/components/dashboard/copy-to-clipboard-button"; 22 23 import { SectionHeader } from "../shared/section-header"; 23 24 24 25 interface Props { 25 26 form: UseFormReturn<InsertPage>; 26 26 - plan?: WorkspacePlan; 27 27 + plan: WorkspacePlan; 27 28 workspaceSlug: string; 28 29 } 29 30 ··· 31 32 const watchPasswordProtected = form.watch("passwordProtected"); 32 33 const watchPassword = form.watch("password"); 33 34 34 34 - const getBaseUrl = () => { 35 35 - if (process.env.NODE_ENV === "development") { 36 36 - return `http://localhost:3000/status-page/${form.getValues("slug")}`; 37 37 - } 38 38 - if (form.getValues("customDomain") !== "") { 39 39 - return `https://${form.getValues("customDomain")}`; 40 40 - } 41 41 - return `https://${form.getValues("slug")}.openstatus.dev`; 42 42 - }; 35 35 + const baseUrl = getBaseUrl({ 36 36 + slug: form.getValues("slug"), 37 37 + customDomain: form.getValues("customDomain"), 38 38 + }); 39 39 + const link = `${baseUrl}?authorize=${watchPassword}`; 43 40 44 44 - const link = `${getBaseUrl()}?authorize=${watchPassword}`; 45 45 - 46 46 - const hasFreePlan = !plan || plan === "free" ? true : false; 41 41 + const hasFreePlan = plan === "free"; 47 42 48 43 return ( 49 44 <div className="grid w-full gap-4 md:grid-cols-2">