diff --git a/apps/web/src/app/(content)/features/status-page/page.tsx b/apps/web/src/app/(content)/features/status-page/page.tsx index 3af7a105..3045b5e2 100644 --- a/apps/web/src/app/(content)/features/status-page/page.tsx +++ b/apps/web/src/app/(content)/features/status-page/page.tsx @@ -72,7 +72,7 @@ export default function FeaturePage() { subTitle="Let your users subscribe to your status page, to automatically receive updates about the status of your services." component={
- +
} col={1} diff --git a/apps/web/src/app/status-page/[domain]/_components/header.tsx b/apps/web/src/app/status-page/[domain]/_components/header.tsx index 1d5f79d2..0114503c 100644 --- a/apps/web/src/app/status-page/[domain]/_components/header.tsx +++ b/apps/web/src/app/status-page/[domain]/_components/header.tsx @@ -4,7 +4,6 @@ import Image from "next/image"; import { useSelectedLayoutSegment } from "next/navigation"; import type { PublicPage } from "@openstatus/db/src/schema"; -import { allPlans } from "@openstatus/db/src/schema/plan/config"; import type { WorkspacePlan } from "@openstatus/db/src/schema/workspaces/validation"; import { cn } from "@/lib/utils"; @@ -25,7 +24,6 @@ type Props = { export function Header({ navigation, plan, page }: Props) { const selectedSegment = useSelectedLayoutSegment(); - const isSubscribers = allPlans[plan].limits["status-subscribers"]; // FIXME: use the workspace.limits return (
@@ -65,8 +63,12 @@ export function Header({ navigation, plan, page }: Props) {
-
- {isSubscribers ? : null} +
+
diff --git a/apps/web/src/app/status-page/[domain]/_components/subscribe-button.tsx b/apps/web/src/app/status-page/[domain]/_components/subscribe-button.tsx index 68cddd7b..395e1178 100644 --- a/apps/web/src/app/status-page/[domain]/_components/subscribe-button.tsx +++ b/apps/web/src/app/status-page/[domain]/_components/subscribe-button.tsx @@ -1,89 +1,88 @@ "use client"; -import { Mail } from "lucide-react"; -import { useFormStatus } from "react-dom"; +import { Bell, Mail, Rss } from "lucide-react"; +import { useState } from "react"; +import { allPlans } from "@openstatus/db/src/schema/plan/config"; +import type { WorkspacePlan } from "@openstatus/db/src/schema/workspaces/validation"; import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@openstatus/ui/src/components/popover"; + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@openstatus/ui/src/components/dropdown-menu"; -import { LoadingAnimation } from "@/components/loading-animation"; -import { toast } from "@/lib/toast"; -import { wait } from "@/lib/utils"; import { Button } from "@openstatus/ui/src/components/button"; -import { Input } from "@openstatus/ui/src/components/input"; -import { Label } from "@openstatus/ui/src/components/label"; -import { handleSubscribe } from "./actions"; +import { getBaseUrl } from "../utils"; +import { SubscribeModal } from "./subscribe-modal"; interface Props { + plan: WorkspacePlan; slug: string; + customDomain?: string; isDemo?: boolean; } -export function SubscribeButton({ slug, isDemo = false }: Props) { - return ( - - - - - -
-
-

- Subscribe to updates -

-

- Get email notifications whenever a report has been created or - resolved. -

-
-
{ - if (!isDemo) { - const res = await handleSubscribe(formData); - if (res?.error) { - toast.error("Something went wrong", { - description: res.error, - }); - return; - } - toast.message("Success", { - description: "Please confirm your email.", - }); - } else { - await wait(1000); - toast.message("Success (Demo)", { - description: "Please confirm your email (not).", - }); - } - }} - > - - - - - -
-
-
- ); -} +export function SubscribeButton({ + plan, + slug, + customDomain, + isDemo = false, +}: Props) { + const [showModal, setShowModal] = useState(false); + const isSubscribers = allPlans[plan].limits["status-subscribers"]; // FIXME: use the workspace.limits + const baseUrl = getBaseUrl({ + slug: slug, + customDomain: customDomain, + }); -function SubmitButton() { - const { pending } = useFormStatus(); return ( - + <> + + + + + + + + + RSS + + + + + + Atom + + + {isSubscribers ? ( + setShowModal(true)}> + + Email + + ) : null} + + + + + ); } diff --git a/apps/web/src/app/status-page/[domain]/_components/subscribe-modal.tsx b/apps/web/src/app/status-page/[domain]/_components/subscribe-modal.tsx new file mode 100644 index 00000000..d9dc7bac --- /dev/null +++ b/apps/web/src/app/status-page/[domain]/_components/subscribe-modal.tsx @@ -0,0 +1,97 @@ +"use client"; + +import { Mail } from "lucide-react"; +import { useFormStatus } from "react-dom"; + +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, +} from "@openstatus/ui/src/components/dialog"; + +import { LoadingAnimation } from "@/components/loading-animation"; +import { toast } from "@/lib/toast"; +import { wait } from "@/lib/utils"; +import { Button } from "@openstatus/ui/src/components/button"; +import { Input } from "@openstatus/ui/src/components/input"; +import { Label } from "@openstatus/ui/src/components/label"; +import { handleSubscribe } from "./actions"; + +interface Props { + open: boolean; + onOpenChange: (open: boolean) => void; + slug: string; + isDemo?: boolean; +} + +export function SubscribeModal({ + open, + onOpenChange, + slug, + isDemo = false, +}: Props) { + return ( + + + + + + Subscribe to updates + + + +
+

+ Get email notifications whenever a report has been created or + resolved. +

+ +
{ + if (!isDemo) { + const res = await handleSubscribe(formData); + if (res?.error) { + toast.error("Something went wrong", { + description: res.error, + }); + onOpenChange(false); + return; + } + toast.message("Success", { + description: "Please confirm your email.", + }); + } else { + await wait(1000); + toast.message("Success (Demo)", { + description: "Please confirm your email (not).", + }); + } + onOpenChange(false); + }} + > + + + + + +
+
+
+ ); +} + +function SubmitButton() { + const { pending } = useFormStatus(); + return ( + + ); +} diff --git a/apps/web/src/app/status-page/[domain]/feed/[type]/route.ts b/apps/web/src/app/status-page/[domain]/feed/[type]/route.ts index 89624979..3e7b38d4 100644 --- a/apps/web/src/app/status-page/[domain]/feed/[type]/route.ts +++ b/apps/web/src/app/status-page/[domain]/feed/[type]/route.ts @@ -30,7 +30,7 @@ export async function GET( rss: `${baseUrl}/feed/rss`, atom: `${baseUrl}/feed/atom`, }, - link: "https://www.openstatus.dev", + link: baseUrl, author: { name: "OpenStatus Team", email: "ping@openstatus.dev", @@ -43,7 +43,7 @@ export async function GET( }); for (const maintenance of page.maintenances) { - const maintenanceUrl = `${baseUrl}/maintenances/${maintenance.id}`; + const maintenanceUrl = `${baseUrl}/events?filter=maintenances`; feed.addItem({ id: maintenanceUrl, title: `Maintenance - ${maintenance.title}`, @@ -54,7 +54,7 @@ export async function GET( } for (const statusReport of page.statusReports) { - const statusReportUrl = `${baseUrl}/reports/${statusReport.id}`; + const statusReportUrl = `${baseUrl}/events/report/${statusReport.id}`; const status = statusDict[statusReport.status].label; const statusReportUpdates = statusReport.statusReportUpdates .map((update) => {