From 4ea506531a75b7316d850ce3df2c6fd0c6e64c02 Mon Sep 17 00:00:00 2001
From: Washington Pires <22279738+washingtonserip@users.noreply.github.com>
Date: Sat, 4 Jan 2025 12:34:02 -0300
Subject: [PATCH] feat: the new subscribe button (#1151)

* feat: create modal to email subscribe

* feat: include feed links in the subscribe button

* fix: closes modal on submition error

* fix: set status page url as feed home

* fix: fix links to feed items

* fix: fix lint issue on the subscribe button

* chore: apply format updates

* fix: apply more lint suggestions

* feat: RSS/Atom links available to everyone

* chore: open rss/atom links in a new tab

* ci: apply automated fixes

* refactor: replace popover components with dropdown menu

* fix: add missing props on the features page

---------

Co-authored-by: Washington <22279738+washingtonbr@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../(content)/features/status-page/page.tsx   |   2 +-
 .../[domain]/_components/header.tsx           |  10 +-
 .../[domain]/_components/subscribe-button.tsx | 145 +++++++++---------
 .../[domain]/_components/subscribe-modal.tsx  |  97 ++++++++++++
 .../status-page/[domain]/feed/[type]/route.ts |   6 +-
 5 files changed, 179 insertions(+), 81 deletions(-)
 create mode 100644 apps/web/src/app/status-page/[domain]/_components/subscribe-modal.tsx

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={
           <div className="m-auto">
-            <SubscribeButton slug={""} isDemo />
+            <SubscribeButton plan="pro" slug={""} isDemo />
           </div>
         }
         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 (
     <header className="sticky top-3 z-10 w-full">
@@ -65,8 +63,12 @@ export function Header({ navigation, plan, page }: Props) {
           <div className="block sm:hidden">
             <Menu navigation={navigation} />
           </div>
-          <div className="text-end sm:w-[120px]">
-            {isSubscribers ? <SubscribeButton slug={page.slug} /> : null}
+          <div className="text-end sm:w-32">
+            <SubscribeButton
+              plan={plan}
+              slug={page.slug}
+              customDomain={page.customDomain}
+            />
           </div>
         </div>
       </div>
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 (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline" className="rounded-full">
-          Get updates
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent align="end">
-        <div className="grid gap-4">
-          <div className="space-y-2">
-            <h4 className="flex items-center font-medium leading-none">
-              <Mail className="mr-2 h-4 w-4" /> Subscribe to updates
-            </h4>
-            <p className="text-muted-foreground text-sm">
-              Get email notifications whenever a report has been created or
-              resolved.
-            </p>
-          </div>
-          <form
-            className="grid gap-2"
-            action={async (formData) => {
-              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).",
-                });
-              }
-            }}
-          >
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
-              name="email"
-              type="email"
-              placeholder="notify@me.com"
-            />
-            <input type="hidden" name="slug" value={slug} />
-            <SubmitButton />
-          </form>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
+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 (
-    <Button type="submit" disabled={pending}>
-      {pending ? <LoadingAnimation /> : "Subscribe"}
-    </Button>
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" className="gap-2 rounded-full">
+            <Bell className="h-4 w-4" />
+            Subscribe
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem asChild>
+            <a
+              href={`${baseUrl}/feed/rss`}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-2"
+            >
+              <Rss className="h-4 w-4" />
+              RSS
+            </a>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <a
+              href={`${baseUrl}/feed/atom`}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-2"
+            >
+              <Rss className="h-4 w-4" />
+              Atom
+            </a>
+          </DropdownMenuItem>
+          {isSubscribers ? (
+            <DropdownMenuItem onClick={() => setShowModal(true)}>
+              <Mail className="h-4 w-4 mr-2" />
+              Email
+            </DropdownMenuItem>
+          ) : null}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <SubscribeModal
+        open={showModal}
+        onOpenChange={setShowModal}
+        slug={slug}
+        isDemo={isDemo}
+      />
+    </>
   );
 }
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 (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Mail className="h-5 w-5" />
+            Subscribe to updates
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="grid gap-4">
+          <p className="text-muted-foreground text-sm">
+            Get email notifications whenever a report has been created or
+            resolved.
+          </p>
+
+          <form
+            className="grid gap-2"
+            action={async (formData) => {
+              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);
+            }}
+          >
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              placeholder="notify@me.com"
+            />
+            <input type="hidden" name="slug" value={slug} />
+            <SubmitButton />
+          </form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function SubmitButton() {
+  const { pending } = useFormStatus();
+  return (
+    <Button type="submit" disabled={pending}>
+      {pending ? <LoadingAnimation /> : "Subscribe"}
+    </Button>
+  );
+}
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) => {
-- 
2.51.2